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.