Problema Z-Index! no encuentro solucion

demeNcys · #1 (**permalink**) 27/09/2011, 13:31

El problema es con z-index en iexplorer , me canse de buscar soluciones, de tocar el codigo pero no encuentro manera de que aparesca como corresponde, siempre aparece por detras de los demas divs.

la web es : www.entraporlista.com.ar y es el menu con submenus del header.

Código:

#menu {
background:url(images/bgmenu.jpg) repeat-x;
width:100%;
height:35px;
border-top:1px solid #000000;
text-shadow:none;
}

#menu ul.primario {
padding: 0 20px;
margin: 0 auto;
width: 1000px;
}

#menu ul.primario li {
float: left;
margin: 0;
padding: 0 15px 0 10px;
position: relative;
z-index:3000;
background:url(images/separadormenu.jpg) no-repeat right;
}

#menu ul.primario li a {
padding: 9px;
color: #ffffff;
display: block;
text-decoration: none;
float: left;
font-weight:bold;
}

#menu ul.primario li span {
position:absolute;
width:100%;
right:7px;
top:0;
height:35px;
background: url(images/subnav_btn.png) no-repeat top right;
}

#menu ul.primario li span.subhover { background-position: bottom right; cursor: pointer;
}

#menu ul.primario li ul.subnav {
list-style: none;
position:absolute;
left: 0; top: 35px;
margin: 0; padding: 0;
display: none;
float: left;
width: 100%;
border:1px solid #e2e4e6;
z-index:1000;
background:#fff;
}

#menu ul.primario li ul.subnav li {
margin: 0; padding: 0;
clear:both;
width:100%;
}

#menu ul.primario li ul.subnav li a {
float:left;
width:100%;
height:10px;
color:#6a6a6a;
font-size:11px;
}

#menu ul.primario li ul.subnav li a:hover { color:#000033 }

demeNcys · #2 (**permalink**) 27/09/2011, 13:36

Para el que tenga el mismo problema, lo resolvi agregando este script en el header

Código:

<script type="text/javascript">
$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});
</script>

ArturoGallegos · #3 (**permalink**) 27/09/2011, 14:41

no se si decir que una forma muy inteligente o bastante burda e innecesaria...

su problema radica en que inicia su código con un comentario

Código HTML:

Ver original<!--
 Vemos que estas interesado en nuestro codigo ! porfavor visita www.*****.**.** para encontrar nuestros sitios.
-->
<!DOCTYPE html>

al colocar ese comentario antes que el doctype hace que el navegador trabaje en modo quirks... que es lo mismo a no tener un doctype valido, por consiguiente su z-index le importa un bledo y se lo pasa por alto.

demeNcys · #4 (**permalink**) 27/09/2011, 15:49

la verdad que te agradesco muchisimo, no tenia idea de eso, lo cambie de lugar y se me solucionaron todos los problemas que tenia !

Tedel · #5 (**permalink**) 28/09/2011, 10:34

Otra observación:

z-index 3000 (¿?)

Con uno y dos basta y sobra.

yanker · #6 (**permalink**) 14/11/2011, 11:38

Gracias Ag666 ,me has alegrado el día makina !