28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage sous-menu position:absolute sous IE

Bonjour je me casse la tête sur un menu qui s'affiche mal sous IE, alors qu'il est OK avec Safari, Chrome et Firefox. Et fait, c'est le sous-menu qui se décale de 50% vers la droite.

Comme un lien vaut mieux que de longues explications, je vous ai extrait que la partie concernée :

http://emailing.wdfproject.fr/menu_transman/menu.html

Merci de tous vos conseils.
Modifié par Wonderfoule (09 Sep 2010 - 12:20)
keyraw a écrit :
Bonjour,

Mets un position:relative; sur #menu li et un left:0; sur #menu li ul.



Merci, mais désolé ça ne marche pas mieux. As-tu fait le test ?
Oui, oui, j'ai testé, ça marche. Il faut aussi que le top soit au max à la même valeur que la hauteur du li.

Dans un menu déroulant, il faut que le sous-menu soit en absolu par rapport à l'item de menu parent d'où le position:relative. Ensuite tu positionne. Si tu ne fixes pas le top et le left, tu laisse le soin au navigateur de placer l'élément comme il le sent ce qui, avec IE, n'est pas une bonne idée ...

Par contre sous IE6 ton menu ne fonctionnera pas à cause du :hover sur le li et le span.
keyraw a écrit :
Oui, oui, j'ai testé, ça marche. Il faut aussi que le top soit au max à la même valeur que la hauteur du li.

Dans un menu déroulant, il faut que le sous-menu soit en absolu par rapport à l'item de menu parent d'où le position:relative. Ensuite tu positionne. Si tu ne fixes pas le top et le left, tu laisse le soin au navigateur de placer l'élément comme il le sent ce qui, avec IE, n'est pas une bonne idée ...

Par contre sous IE6 ton menu ne fonctionnera pas à cause du :hover sur le li et le span.


Pardonne-moi d'insiter, j'ai -à priori suivi tes conseils- et voilà le résultat :
http://emailing.wdfproject.fr/menu_transman/menu.html
Comme tu peux le constater, le problème n'est pas résolu, c'est même pire. Pourrais-tu modifier et me faire passer un nouveau fichier css ? Merci.
#menu {padding-top:20px; height:75px; width:630px}

/* Menu level 1 */
#menu ul {padding:0; margin:0; display:inline; font-family:arial narrow; text-transform:uppercase; list-style-type:none}
#menu li {float:left; width:105px; text-decoration:none; color:#666666; font-size:.95em; text-align:center; line-height:5em; position:relative; }
#menu li a {display:block; color:#666666; text-decoration:none; padding:0; cursor:pointer}
#menu li span {display:block; text-decoration:none; cursor:pointer; height:75px}
#menu li a:hover {background-color:#E1E1E1; background:url('images/bg_menu.png') top left no-repeat; height:75px; cursor:pointer} 
#menu li span:hover {height:75px; cursor:pointer}

/* Menu level 2 */
#menu li ul {display:none}
#menu li ul li {width:190px; height:30px; border-top:1px solid #666666; border-bottom:1px solid #fff; font-size:0.8em; text-transform:none}
#menu li ul span {padding-left:10px; height:30px; font-size:1.2em; text-align:left; text-transform:none}  /*titres des onglets*/
#menu li ul a {padding-left:10px; font-family:arial; text-transform:none; text-align:left; line-height:3.5em}
#menu li:hover ul {display:block; position:absolute; top:75px; width:190px; background-color:#dadada; left:0; }
#menu li ul span:hover {padding-left:10px; background:#efefef; height:30px}
#menu li ul a:hover {height:30px; padding-left:10px; background:#efefef}
Wonderfoule a écrit :
Pourrais-tu modifier et me faire passer un nouveau fichier css ?
Eh bien keyraw l'a fait mais je t'invite à relire cette règle du forum.

Et au passage ton menu déroulant est toujours inaccessible à la navigation clavier.
Modifié par Heyoan (09 Sep 2010 - 12:46)
Sujet clos
Aller à