Foros del Web » Creando para Internet » CSS »

Problema Menu detras de Combobox

Estas en el tema de Problema Menu detras de Combobox en el foro de CSS en Foros del Web. Hola a todos, tengo un gran problema, resulta que estoy elaborando un sistema en ASP y tengo un menú con hojas de estilo (CSS), bueno ...
  #1 (permalink)  
Antiguo 03/04/2012, 08:07
 
Fecha de Ingreso: abril-2012
Mensajes: 1
Antigüedad: 12 años
Puntos: 0
Pregunta Problema Menu detras de Combobox

Hola a todos, tengo un gran problema, resulta que estoy elaborando un sistema en ASP y tengo un menú con hojas de estilo (CSS), bueno el problema en si es que es el Internet Explorer 6 el menú se ve detrás de los combobox, por favor si alguien me puede ayudar con esto, gracias.

imagen del menu:




[CSS]

.menu_bg {
background: #1e8fcb;
height: 22px;
z-index: 100;
}

* {
margin: 0px;
padding: 0px;
outline: 0;
z-index: 100;
}

body {
font-family: Arial, Helvetica, sans-serif;
z-index: 100;
}

#menu {
text-align: center;
font-size: 11px;
width: 1000px; /*ancho del menu*/
margin: 0px 4px; /*margen sobre el menu*/
z-index: 100;
}

#menu ul {
list-style-type: none;
z-index: 100;
}

#menu ul li.nivel1 {
float: left;
width: 100px;
margin-right: 0px; /*margen entre botones*/
z-index: 100;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff; /*Color Letra*/
background: #1e8fcb; /*color botones*/
border: solid 0px #fff;
padding: 4px; /*alto boton*/
position: relative;
z-index: 100;
}

#menu ul li:hover {
position: relative;
z-index: 100;
}

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #91cee3; /*color botones seleccionado+*/
color: #38569f;
padding: 4px;
/*text-align: left;*/
z-index: 100;
}

#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
z-index: 100;
}

#menu ul li ul {
display: none;
z-index: 100;
}

#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 0px;
z-index: 100;
}

#menu ul li ul li a {
width: 155px;
padding: 4px;
border-top-color: #FFFFFF;
border-top: solid 1px;
text-align: left;
z-index: 100;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
z-index: 100;
}
table.falsa {
border-collapse:collapse;
border: 0px;
float: left;
position: relative;
text-align: left;
z-index: 100;
}


[Menu HTML]

<div class="menu_bg">

<div id="menu">
<ul>
<li class="nivel1"><a href="" class="nivel1">Ingreso</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Ingreso<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="user_add.asp">Ingreso de Usuario</a></li>
<li><a href="mantencion_user.asp">Mantención de Usuarios</a></li>
<li><a href="mantencion_agenda.asp">Mantención de Agenda</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Sesión</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Sesión<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="mantencion_sesion.asp">Mantención de Sesión</a></li>
<li><a href="pagos_add.asp">Ingreso de Pagos</a></li>
<li><a href="ingreso_entregas.asp">Ingreso de Entregas</a></li>
<li><a href="cuadratura_sesion.asp">Cuadratura de Sesión</a></li>
<li><a href="resumen_concepto.asp">Resumen de Conceptos</a></li>
<li><a href="ingreso_planilla.asp">Ingreso Planilla</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</div>

</div>

eso es saludos, gracias.

Atte. Luis
  #2 (permalink)  
Antiguo 03/04/2012, 13:19
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Problema Menu detras de Combobox

Hola chekastiler, bienvenido.

- Controla las etiquetas de apertura y cierre del menú, están cruzadas y faltan etiquetas de cierre. ej: <div id="menu"> intenta cerrar con </ul> o bien falta abrir la lista.

- Quita todos los "z-index:100;" de todas las propiedades. Que no quede ningun z-index en tu hoja de estilos, vuelve a empezar.

- Tienes <li> flotados, por tanto, añade overflow: hidden; a su contenedor (#menu). para más información googlea "limpiar los float". En resumen, si no lo haces el height de tu menú será igual a cero y traerá problemas.

- Por si acaso haz un marcado en el cual el contenedor del menu y el contenedor de los combobox sean hermanos. Si no es posible, busca o crea forzosamente una hermandad entre contenedores ancestros a ellos.
Y da un posicionamiento distinto de static a los contenedores hermanos
No es necesario, pero tratándose de ie6 tal vez lo sea.

- coloca z-index: 0; al contenedor destinado a los combobox y z-index: 1; al contenedor destinado al menu

- mirá este ejemplo

Saludos.

PD: cuando postees, fijate que hay un select "highlight", usalo para colorear tu código. Probablemente más personas se interesen en responderte.

Etiquetas: combobox, explorer, hover, html, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:36.