Primeramente hola...
Muchas gracias por postular tu código CSS me da una mejor idea de tu problema, pero de todas formas necesitaría el HTML que le acompaña para poder hacer pruebas y ayudarte de una mejor manera. O sea, visualizar el problema que tienes en directo, por decir así.
Igualmente, hay una cosa que no entiendo?
Cuando defines..:
Código :
img {
border: 0;
float:left;
position:relative;
}
Esto quiere decir una clase o (.img) supongo, que luego le aplicas la misma clase a los dos id (#contacto) y (#eventos).
Correcto?
Me corriges si estoy equivocado.
Así que hay que darle el punto para que funcione .img, pero como dices que va bien en firefox y que tu problema esta en internet explorer supongo que en tu código le pusiste el punto.
Si no? No funcionaria en ninguno!
Otra cosa, normalmente cuando le das una posición top y left de esta forma el que recibe estos atributos debería de estar con un (position:absolute) y no (relative). Por que?
Por el tema de que si es relativo? Es relativo a su contenedor pudiendo así definir su posición con (padding) o (margin).
Luego de esto el z-index de estos elementos solo será valido si tiene o (position:absolute) o (position:relative). Por que si no. No hará diferencia. Tampoco funciona el z-index si se encuentran uno adentro del otro..: Ejemplo
Código HTML :
<html>
<head>
</head>
<body>
<!--Asi funciona el z-index-->
<div id="contenedor">
<div id="contacto"></div>
<div id="eventos"></div>
</div>
<!--Asi no funciona el z-index-->
<div id="contenedor">
<div id="contacto">
<div id="eventos"></div>
</div>
</div>
</body>
</html>
Ahora si aun así no te funciona en internet explorer esto es mas que normal, todos sabemos que internet explorer no anda con los standards web, estando repleto de bugs y errores en relación a los demás navegadores. Ademas cada versión ie5, ie6, ie7, ie8. Cada uno funciona diferente. Por esto lo de utilizar algún hack, pero esto no validaría tu código.
Entonces te recomiendo que hagas una hoja de estilos solo para internet explorer donde solo deberías de enfatizar las partes que este contiene errores, ojo no todo el código, solo los identificadores (#id) y las clases (.class) que se vean diferentes.
Por ejemplo.:
Si tienes un div..:
Código :
/*Hoja de estilos normal para todos los demás navegadores*/
#contacto{width:200px; height:40px;}
Que en internet explorer se ve con 210px pero el height se ve igual. Solo deberías de acrecentar en la hoja de estilos para internet explorer el width quedando como asi.
Código :
/*Hoja de estilos para internet explorer*/
#contacto{width:210px;}
Para hacer esto entre las etiquetas <head> y </head> le tienes que enlazar esta otra hoja de estilos que solo se abrira con internet explorer y dependiendo de la version...
De la siguiente manera...:
Código HTML :
<head>
<!--[if IE 5]>
<link href="aqui_tu_hoja_de_estilos_para_ie5.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
<!--[if IE 6]>
<link href="aqui_tu_hoja_de_estilos_para_ie6.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
<!--[if IE 7]>
<link href="aqui_tu_hoja_de_estilos_para_ie7.css" rel="stylesheet" type="text/css" media="screen"/>
<![endif]-->
<!--[if IE 8]>
<link href="aqui_tu_hoja_de_estilos_para_ie8.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->
</head>
Espero haberte ayudado. Por el momento es todo que te puedo decir sin el html que va junto con este css que postulaste. Cualquier duda pregunta.....
Saludos.
