Extraño comportamiento de Internet Explorer con listas y CSS

[Tximis]

Buenas,

Estoy haciendo un menu utilizando listas de objetos y CSS. En Mozilla consigo el aspecto que quiero, pero Internet Explorer lo renderiza de otra forma.

El código HTML es el siguiente, una lista de enlaces dentro del DIV "menu":

Código:

<div id="menu">
<ul>
	<li><a href="http://www.example.com">Item 1</a></li>
	<li><a href="http://www.example.com">Item 2</a></li>
	<li><a href="http://www.example.com">Item 3</a></li>
	<li><a href="http://www.example.com">Item 4</a></li>
</ul>
</div>

La hoja de estilos contiene el siguiente código:

Código:

body {
	background: black;
}

li {
	list-style: none;
	list-style-image: url(b1.gif);
	color: white;
}

li:hover {
	list-style-image: url(b2.gif);
}

li a:hover {
	list-style-image: url(b2.gif);
}

#menu {
	width: 10em;
	margin-left: 10px;
	margin-top: 100px;
	font: 13px Verdana, 'Bitstream Vera Sans', Tahoma, Arial, Helvetica, sans-serif;
}

#menu a {
	text-decoration: none;
}

#menu a:hover {
	color: #000000;
	background-color: #999999;
}

Hasta aquí en Internet Explorer y Mozilla se muestra de la misma forma, si quereis podeis comprobarlo vosotros mismos: Prueba 1.

El siguiente paso es añadir "display: block" a los enlaces del DIV "menu" para que cuando pase el ratón por encima el fondo de estos ocupe todo el menu.

Primer problema: En Mozilla se ve correctamente, pero el Explorer mete una separación entre los elementos del menu, este no es el comportamiento que esperaba. ¿Por qué pasa esto? Podeis comprobarlo en: Prueba 2. Pongo un pequeño pantallazo con los dos renders:



Por casualidad pruebo a añadir "width: 10em" a los enlaces del DIV "menu". En Mozilla sigue mostrandose correctamente y en el Explorer parece que se ha solucionado las separaciones entre los elementos del menu, lo teneis en Prueba 3. ¡Pero sorpresa!

Segundo problema: En el Explorer al pasar por encima de los enlaces la imagen de la biñeta cambia pero no está animada, se queda estática. ¿Por qué puede pasar esto, un fallo? ¿Solución?

Muchas gracias por adelantado, Saludos.

[Remo:Erdosain]

Sobre el problema 1, la opcion 1: Borrar los espacios en blanco entre las etiquetas.
En lugar de

Código:

<li>
<a></a>
</li>

pones todos los elementos de la lista en una misma linea

Código:

<li><a>...</a></li><li><a>...</a></li><li><a>...</a></li><li><a>...</a></li>

La otra es agregar

Código:

 li {_display:inline;}

Sí, el guión bajo es obligatorio.
Bienvenido al mágico mundo de los bugs de Internet Explorer.

Por cierto

Código:

li a:hover {
list-style-image: url(b2.gif);
}

A no acepta la propiedad list-style-image.

[Tximis]

Gracias!!

Con el primer método no me funciona (li {_display:inline;}), desaparecen en Internet Explorer las biñetas ¿?. Con el segundo truco que propones si se soluciona, ya se vé igual en los dos navegadores, por si lo quereis ver:

http://tximis.net/misc/menu/menu4.html

Por otra parte, y siendo un poco mas "quisquilloso", en Mozilla la biñeta se encuentra alineada verticalmente con el texto, en cambio en Internet Explorer se muestra un poco por encima, ¿Se podría solucionar esto?

Saludos

[Remo:Erdosain]

No tengo IE como para probar pero te puedo confirmar que Opera tiene un problema alineando la imagen que pones con list-style-image. Quizás IE también lo tiene. La única solución que se me ocurre es que uses una imagen de fondo.

Código:

li {background:#fff url(...) no-repeat center left;}

o como mejor se adapte a tu diseño.

[RonStone]

hola amigo tube el mismo problema y hay otra forma de solucionarlo


a { zoom:1;}

con eso se corrgie el error q por cierto solo ocurre en IE5 e IE6 porq los demas tienen mejor control de ese error

saludos

[punk567]

hola, creo qu es: #menu a {display:block }

saludos

[webosiris]

por favor, miren la fecha de los mensajes, este mensaje es de hace 4 años.