Menu horizontal pb width sous ie

Bonjour à tous,

j'ai repris le menu deroulant horizontal du tuto mais celui-ci proposait des taille des cellules fixes

#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}

ce qui ne m'arrange pas, j'ai donc suprimé le width ce qui ne pose pas de probleme sur safari, firefox et autre opera
mais ie utilise toute la largueur du menu pour chaque titre de menu ou sous-menu
ca fait un ptit moment deja que je bloque sur ce pb et la je suis à cour d'idées j'espere donc que vous pourrez m'aider

merci

j'en profite pour signaler un autre pb avec ce menu : (version du site)
sous safari seul la premiere ligne d'un sous-menu change de couleur au survol
Modifié par anhilia (25 Sep 2006 - 12:57)

anhilia a écrit :
Bonjour à tous,

mais ie utilise toute la largueur du menu pour chaque titre de menu ou sous-menu

Bonjour
Faut aussi enlever display:blockdes liens
Modifié par chmel (25 Sep 2006 - 23:15)

salut,

merci chmel mais si j'enleve display:block il y a un espace pas très esthetique entre les sous-menu et (pas testé mais) le display joue un role dans le fait d'afficher ou de cacher les sous-menu, non?

bon j'en profite pour apporter qlq precisions :
-ce qu'affiche FF, safari, opera =>
Menu1 /// Menu2 /// Menu3 /// ...
-ce qu'affichait ie =>
Menu1
///
Menu2
/// ...
- ce qu'il affiche maintenant que j'ai supprimé un text-align:center inutile dans dl =>
Menu1
/// Menu2
/// Menu3 ...
et je ne vous parle meme pas du résultat quand les sous-menu s'activent

pour finir je vous met une partie des css, je l'ai telement bidouillé qu'il est possible qu'une grosse boullette se soit glisée sans que je m'en rende compte

dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}
#menu {
margin-top: 50px;
margin-left: 30px;
font-family: Arial, Verdana, Geneva, sans-serif;
}
#menu dl {
float: left;
margin: 0 1px;
}
#menu dt {
font-size: 12px;
	font-weight: bold;
	color: #CCC;
}

#menu li {
text-align: center;
}
#menu dt a {text-decoration: none; height: 100%; border: 0 none;}
#menu dt a:link {color: #CCC;}
#menu dt a:visited {color: #CCC;}
#menu dt a:hover{color: #fff;}
#menu li a {font-size: 10px; text-decoration: none; display: block; height: 100%; border: 0 none;}
#menu li a:link {color: #3f3f3f; background: #1A1;}
#menu li a:visited {color: #3f3f3f; background: #1A1;}
#menu li a:hover {color: #1A171B; background: #fff;}

et le html donne

<dl><dt onmouseover="javascript:montre();"><a href="page.html" title="M1">Menu1</a></dt></dl>
<dl><dt> /// </dt></dl>
<dl><dt onmouseover="javascript:montre();"><a href="page.html" title="M2">Menu2</a></dt></dl>
<dl><dt> /// </dt></dl>
<dl><dt onmouseover="javascript:montre('smenu1');"><a href="#" title="M3">Menu3</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="page.html">sMenu1</a></li>
					<li><a href="page.html">sMenu2</a></li>
					<li><a href="page.html">sMenu3</a></li>
				</ul>
			</dd>
	</dl>

...

voila voila
merci
Modifié par anhilia (26 Sep 2006 - 00:04)

c'est bon j'ai trouvé enfin presque, j'avais mal fait mes recherches dans le forum dsl

d'ailleurs c toi chmel qui m'a fourni la réponse via un autre topic
la solution est toute simple : ajouter dans dl un text-align:left
bon ca merde encore à l'apparition des sous-menu mais je suis sur la bonne voie


merci