Problemas con display:block en IE
5 seguidores
Hola, actualmente estoy desarrollando una web en Joomla y me ha surgido un problema con el menu desplegable...
Para mostrar los submenús desplegables utilizo display:block y como no podía ser de otra manera en IE(10) no funciona esa opción, diréctamente no me muestra nada... he probado varios hacks que he visto por ahí pero ninguno me ha funcionado...
Alguien sabe alguna alternativa???
Gracias de antemano por vuestro tiempo...!!!
Cloudstudio
Porque no lo haces con jquery ?
Ander
La opción display block funciona sin problemas en IE10, así que el problema no está específicamente en esa regla de CSS.
Alo
Y como puede ser que funcione en tidos los navegadores menos en IE?? la abro con IE10 y nada... que raro....
En el menú que comento también se cambia el color del fondo de los <li> al hacer un :hover y en IE10 no lo hace...
No entiendo que es lo que pasa....
Alo
Éste es el código que funciona en todos los navegadores menos en IE (incluida la verisón 10)
Al estar haciéndolo sobre Joomla pensé que quizás era cuestión de éste pero lo he sacado fuera a un archivo html y tampoco funciona...
#menu_principal{
clear:both;
margin: auto;
width: 940px;
position: relative;
top: 34px;
}
.nav {
margin: 0;
padding: 0;
}
.nav li {
float: left; /* la lista se ve horizontal */
height: 30px;
list-style: none;
border-left: 1px dotted #b2b2b2;
}
.nav li a {
height:40px;
color: #74706e;
font-family: "roboto_condensedregular";
font-size: 13px;
line-height: 28px;
text-decoration: none;
padding: 5px 10px 5px 10px;
}
.nav li a:hover {
color: #fff;
}
/* eliminamos los bordes del primer li */
.nav li:first-child {
border:none;
}
.nav li:hover{
color:#fff;
background-color: #AACAE0; /* color hover del menu */
}
/* primer nivel */
.nav li ul {
margin: 0;
padding: 0;
display:none; /* ocultamos los submenús*/
position:absolute;
top:30px;
z-index: 10;
}
.nav li:hover > ul {
display:block; /* aquí es donde aparecen los submenús*/
background-color: #fff;
width:280px;
-moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
box-shadow:5px 5px 5px rgba(0,0,0,0.3);
}
.nav li:hover > ul li{
border: none;
position: relative;
display:block;
width: 280px;
height: 35px; /* grosor de cada li de los submenús */
border-bottom: 1px dotted #ddd;
}
.nav li ul li:last-child{
border: none;
}
.parent{ /* solo en los <li> con hijos*/
background: url(../images/bullet_menu_desplegable.png) 268px 14px no-repeat;
}
.nav li ul li a{
padding: 0;
padding-left: 10px;
border: none;
display:block;
width: 270px;
height: 35px;
line-height: 35px;
text-align: left;
}
.nav li ul li ul {
left:280px;
top:0;
}
No se si se me escapa algo...
Un saludo!
Juanmanuelalcon.com
Muy buenas!
Acabo de probar tu css con un marcado normal que he generado viendo tus estilos y, por lo menos a mi, me funciona correctamente en IE en todas sus versiones salvo IE7 que desplaza la sublista (he añadido el parámetro left a ".nav li ul" para corregir esto).
Puedes verlo aquí:
JSFiddle
* Si ves que JSFiddle no corre en IE7 / 8 copia el codigo y pruébalo directamente.
Ya nos dices.
Un saludo!
Usuario desconocido
Buenas, me sonaba bastante el error, pero no me acordaba, así que he "googleado" un poco y he encontrado la solución del error que yo recuerdo.
Era por no tener la declaración DOCTYPE en la página.
...
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
....
No se si este será tu caso.
Alo
Hola!, gracias por tu tiempo pero la declaración <!DOCTYPE html> está en su sitio, sigo en las mismas...no funciona y me estoy volviendo un poco loco, pero como todas estas cosas luego resulta que es por una tontería que tenia delante de las narices...pero de momento no doy con ello...
Lo dicho gracias por tu tiempo!!!
Alo
Por cierto Juanmanuelalcon.com, he probado lo que me comentas y efectivamente funciona perfecto... así que no se que está pasando por que yo sigo en las mismas...
Gracias y un saludo!!!!
Juanmanuelalcon.com
Hola Alo!
dale un revisado al marcado o copialo por aquí y te echamos una mano.
Un saludo!
Juanma.
Jesús A.
Si aislándolo va bien ha de ser algún efecto colateral o propiedades que se extienden y están provocando eso. Si no consigues deducir el error o verlo con Firebug o similar intenta mostrar donde se vea yendo mal si puede ser. Así es difícil.
Saludos.
Alo
Os pongo el enlace... aunque de momento está en pruebas
www.estudio144.com/ivalia
Juanmanuelalcon.com
Así de primeras creo que deberías incluir en el ul.nav un clear:both así como al primer y segundo nivel de li asignarle la propiedad position:relative para poder posicionar en absolute los uls dependientes. En IE se descuadra por eso.
Prueba y nos comentas.
Usuario desconocido
Buenas,
Lo que aparece en la página es esto <DOCTYPE html>, cuando debería ser esto <!DOCTYPE html>, es decir, falta la admiración "!"
Saludos,
Alo
Hola sergiogmz, pues efectivamente tienes toda la razón, lo he cambiado y funciona perfectamente! ves!!! ni en un millón de años me hubiera dado cuenta de esto...gracias me has quitado un peso de encima!
el DOCTYPE....hay que jod.....
Usuario desconocido
Jeje, suele pasar, lo tienes al lado y no lo ves.
Por cierto, para que quede constancia, el problema de IE es con el li:hover, además por lo que leí, ya ocurría hace bastante versiones.