[résolu] Bug IE dans un menu avec span et hover

Bonjour,

l'affichage du texte du menu (entre span donc) se fait normalement - sur une ligne sous FF, Opera, Netscape et Safari - et sur plusieurs lignes sous IE.

alors voilà, j'ai testé diverses solutions autour du haslayout bien connu, et ça ne marche pas... c'est peut-être pas à cause de ça, je sais pas trop là.
Un truc, le width:29px du ul#menu li semble être déterminant...

http://lefrankendriksite.free.fr/temp/

le css concerné :

ul#menu {
	background: #FFD7AE;
	border: 2px solid #FFDAB5;
	display: block;
	height: 42px;
	margin: 10px auto;
	padding: 0 0 15px 20px;
	position: relative;
	width: 300px;
}

ul#menu li {
	background: transparent url(images/boutonmenu.jpg) no-repeat 0 -6px;
	float: left;
	font: bold 13px trebuchet ms,verdana,arial;
	letter-spacing: 2px;
	list-style-type: none;
	margin: 5px 20px;
	width: 29px;
}

ul#menu li a#cur {
	background: transparent url(images/boutoncur.jpg) no-repeat 0 -3px;
	color: #ffbd7b;
	font: bold italic 13px verdana,arial,sans-serif;
	letter-spacing: 2px;
	padding: 0;
}

ul#menu li a:link, ul#menu li a:visited {
	background: transparent;
	color: #C33;
	display: block;
	height: 35px;
	margin: 0;
	padding: 0;
}

ul#menu li a:hover, ul#menu li a:active {
	background: transparent url(images/boutonmenu.jpg) no-repeat 0 0;
	color: #C33;
}

ul#menu a span { display: none; }

ul#menu a:hover span {
	display: inline;
	left: 80px;
	position: absolute;
	top: 37px;
	z-index: 1;
}

ul#menu a#cur span {
	display: inline;
	left: 30px;
	position: absolute;
	top: 37px;
	z-index: 0;
}

le xhtml concerné :

<ul id="menu">
<li><a href="#" id="cur"><span>nouvelles fra&icirc;ches</span></a></li>
<li><a href="bio.html"><span>biographie &amp; images</span></a></li>
<li><a href="disco.html"><span>discographie &amp; sons</span></a></li>
<li><a href="liens.html"><span>liens d'ici &amp; d'ailleurs</span></a></li>
</ul>

Merci !
Modifié par Tomek (06 Nov 2006 - 12:03)

Sur IE7, ça fonctionne nikel mais effectivement, IE6 affiche sur plusieurs lignes..

et en supprimant l'information width ?
Je comprend pas pourkoi tu veux réduire l'info sur 29pixels ?!?!
Modifié par LeParrain735 (03 Nov 2006 - 18:44)

merci pour l'info sur IE7, je ne peux pas vérifier pour le moment vu que je suis sur win 2000 (ah ah, encore bravo MS pour la non-compatibilité d'OS).

Si je ne mets pas cette largeur, l'image-bouton n'apparait pas...

ok, pour info donc, c'est résolu, il suffit d'ajouter une valeur de width suffisante dans ces deux éléments :

ul#menu a:hover span {
	display: inline;
	left: 80px;
	position: absolute;
	top: 37px;
        [#olive]width: 300px;[/#]
	z-index: 1;
}

ul#menu a#cur span {
	display: inline;
	left: 30px;
	position: absolute;
	top: 37px;
        [#olive]width: 300px;[/#]
	z-index: 0;
}