z-index e Internet Explorer

Como muchos habréis comprobado en vuestras carnes, hasta la versión 7 de Internet Explorer, la propiedad z-index funciona como le da la gana a Microsoft. Esto provoca una serie de errores al mostrar la página como por ejemplo que un menú desplegable se muestre por debajo del contenido de la página.

¿Y a que se debe? vosotros diréis, aunque supongo que conocéis la respuesta de sobra: Explorer Sucks.

La W3C establece en el estandar CSS que solo los elementos con algún valor asignado a z-index deben crear su propio indice empezando en cero. Explorer, por supuesto, se pasa los estándares por el arco del triunfo y establece que todos los contenedores crean nuevos indices empezando en cero, por lo tanto la propiedad es mas o menos inútil.

Soluciando el problema

La mejor solución y mas sencilla es eliminar el z-index del elemento actual y aplicarselo al primer elemento padre.

<div style=”z-index:10″>

<ul>

<li><p>Quiero que me vean por encima del contenido!</p</li>

</ul>

</div>

Solución a los margenes en las listas en Internet Explorer

Seguro que mas de uno y mas de dos habeis tenido este problema cuando usais listas en Internet Explorer (Por que no muere ya?). La cosa es que aunque en Firefox se ve perfectamente, en Explorer muestra un pequeño margen entre los elementos de la lista y no mola nada, la verdad.

Despues de probar varias soluciones (la mayoría sin exito), me encuentro con que la solución es bien sencilla, solo hay que aplicar la propiedad “vertical-align:botom” a los elementos de la lista y aunque no os lo creais a mi me ha funcionado perfectamente.