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

Auteur
Wonderfoule	# 08 Sep 2010 - 19:46:50
19 Posts	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)
19 Posts
keyraw	# 09 Sep 2010 - 10:09:36
61 Posts	Bonjour, Mets un position:relative; sur #menu li et un left:0; sur #menu li ul.
61 Posts
Heyoan	# 09 Sep 2010 - 10:19:18
Modérateur 8101 Posts	Hello, en l'état ton menu est inaccessible sans souris : voir ce tutoriel (Fairytells). Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Wonderfoule	# 09 Sep 2010 - 10:45:25
19 Posts	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 ?
19 Posts
Wonderfoule	# 09 Sep 2010 - 10:49:57
19 Posts	Heyoan a écrit : Hello, en l'état ton menu est inaccessible sans souris : voir ce tutoriel (Fairytells). Merci Heyoan, je vais étudier ce tuto… même si sa longueur m'effraie un peu.
19 Posts
keyraw	# 09 Sep 2010 - 11:07:12
61 Posts	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.
61 Posts
Wonderfoule	# 09 Sep 2010 - 11:55:27
19 Posts	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.
19 Posts
keyraw	# 09 Sep 2010 - 12:07:40
61 Posts	#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}
61 Posts
Wonderfoule	# 09 Sep 2010 - 12:19:08
19 Posts	Merci Keyraw, c'est magique !! Heu, non… en fait logique !
19 Posts
Heyoan	# 09 Sep 2010 - 12:46:31
Modérateur 8101 Posts	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) Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts