CSS box/ul menú

Question

Estoy teniendo serios problemas para conseguir mi css para que funcione correctamente.Se ve diferente en los 3 navegadores que uso (Chrome, IE y FF).

Ahora la pregunta en la mano, he estado tratando de copiar el ejemplo de la siguiente url:http://www.alistapart.com/articles/taminglists/ Simplemente desplácese hacia abajo casi hasta el fondo y buscar "En el Mundo Real" y un menú azul.

He implementado este menú, pero no puedo conseguir la costumbre de imágenes para trabajar (yo uso una imagen personalizada)

Funciona perfectamente en Chrome, me sale el look que yo busco.En IE puedo obtener un margen en el lado izquierdo del menú donde se ubica la imagen y la imagen es dentro de este margen?y en FF, las imágenes se sitúan por encima del texto y crea un aspecto gracioso (también en el espacio de margen).

Mi url es:http://homeweb.mah.se/~M09K0291/123789/Lab7/

He estado tratando de agregar una hoja de estilo para IE y se retira el acolchados/márgenes de nuevo, pero eso no funcionó.Quiero que la salida que Chrome está produciendo.

Answer 1

Cada navegador tiene su propio conjunto de valores por defecto de margen, relleno, espaciado, etc. Ahí es donde la mayor parte de las diferencias provienen de en el CSS. Considere usando un restablecimiento de estilo para toda su sitio. Esto debe darle una base común que todos los navegadores deben reconocer. Si no quiere o no puede permitirse el lujo de establecer un restablecimiento CSS para toda la hoja de estilo, por lo menos hacer uno para su menú.

Haga esta la primera regla para el menú, a continuación, definir cualquier otro estilo de menú después de esta:

/* This example assumes your menu is contained 
   in a <div /> with an ID of "menu" */
div#menu, div#menu ul, #menu li, ul#menu a
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    line-height: 1;
    list-style: none;
}

Esto debería solucionar la mayoría de sus problemas.

Answer 2

El problema puede estar en la forma en que los diferentes navegadores crear listas:ya sea con rellenos o en los márgenes de los elementos de la lista.

Si se quita el list-style-position regla y dar un 32px margen izquierda de la li etiqueta, usted verá la marca de verificación, al menos en Firefox, forrado de la manera que se describe.La extensión Firebug es una gran ayuda en el diagnóstico de este tipo de problemas.

Un restablecimiento de la hoja de estilos también le ayudará a llevar la uniformidad de la forma en que los navegadores manejan estilos (como una respuesta más rápida correctamente indicado).