Pb de compatibilité avec ie6 pour menu déroulant! je trouve pas, help

Bonjour, mon menu fonctionne bien sous firefox et ie7 mais pas sous ie6, je vois d'ou vient le problème mais malgré mes recherches je n'arrive pas à le résoudre. Si qq'un y arrive ce serait vraiment cool. merci par avance.
Voici le code html :

<div id="menu">
				<dl  onmouseover="montre('smenu6');" onmouseout="cache('smenu6');">   
					<dt><img src="images/deco/index_agenda.jpg"/></dt>
					<div id="smenu6">
						<ul>
							<li><a href="femmes.html">Femmesrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</a></li>
							<li><a href="hommes.html">Hommes</a></li>
							<li><a href="femmes.html">Femmes</a></li>
							<li><a href="hommes.html">Hommes</a></li>
						</ul>
					</div>
				</dl>
				<dl  onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">   
					<dt><img src="images/deco/index_actualite.jpg" border="0" /></dt>
					<div id="smenu2">
						<ul>
							<li><a href="femmes.html">Femmes</a></li>
							<li><a href="hommes.html">Hommes</a></li>
						</ul>
					</div>
				</dl>
				<dl onmouseover="montre('smenu3');" onmouseout="cache('smenu3');"> 
					<dt><img src="images/deco/index_nouveaute.jpg" border="0" /></dt>
					<div id="smenu3">
						<ul>
							<li><a href="retouche.html">Retouches</a></li>
							<li><a href="fidelite.html">Carte de fidélité</a></li>
							<li><a href="cadeau.html">Chèques cadeaux</a></li>
						</ul>
					</div>
				</dl>
				<dl onmouseover="montre('smenu4');" onmouseout="cache('smenu4');"> 
					<dt><img src="images/deco/index_presse.jpg" border="0" /></dt>
					<div id="smenu4">
						<ul>
							<li><a href="retouche.html">Retouches</a></li>
							<li><a href="fidelite.html">Carte de fidélité</a></li>
							<li><a href="cadeau.html">Chèques cadeaux</a></li>
						</ul>
					</div>
				</dl>
				<dl onmouseover="montre('smenu5');" onmouseout="cache('smenu5');"> 
					<dt><img src="images/deco/index_liens.jpg" border="0" /></dt>
					<div id="smenu5">
						<ul>
							<li><a href="retouche.html">Retouches</a></li>
							<li><a href="fidelite.html">Carte de fidélité</a></li>
							<li><a href="cadeau.html">Chèques cadeaux</a></li>
						</ul>
					</div>
				</dl>
			</div>

voici ma css :

dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu {
	width:735px;
	margin:30px auto 0 auto;
}

#menu dl {
	float: left;
	width: 145px;
}

#menu dt {
	cursor:pointer;
	text-align: center;
	width:145px;
	margin:1px
}

#menu li { 
	display:none; 
}

#menu li a, #menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
	background: #eee;
}

#smenu6{
	margin:10px auto 0 auto;
	padding:0;
	background-color:#fff;
	text-align:left;
}

#smenu6 a{
	color:#0066CC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;
}

Modifié par befa13320 (25 Sep 2007 - 21:29)

Bonjour befa13320 et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Si ce n'est déjà fait, il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Ok c noté, vraiment désolé ..

Merci.

La première chose qui ne va pas, c'est que ta page est invalide. Je pense que tu devrais déjà commencer par corriger cela car ça te permettra de te rendre compte que tu as :

- Un problème de structure (balises interdites aux endroits où tu les as placés)
- oublié les alt sur chaque image (ce qui fait que lorsque j'ai tenté d'afficher la page résultant de ton code, j'ai eu une page blanche...)

et pourquoi un élément dl pour chaque sous-menu ?
Modifié par koala64 (25 Sep 2007 - 22:07)

Hello,

Merci pour ta réponse c'est vraiment gentil mais je ne vois pas ou est le probleme de structure dont tu parles. En fait le menu fonctionne assez bien sur ie7 et firefox mais pas sous ie6. Lorsqu'un sous menu prend trop de place en largeur les éléments qui suivent partent à la ligne sous ie 6...
si jamais tu as a une solution ...

merci

fabrice

Salut,

Il ne s'agit pas que d'un simple problème de mise en page.
Le code est invalide ( Fais donc un test ici : http://validator.w3.org/ )
Si tel est le cas, tu ne peux garantir un rendu correct quelquesoit le navigateur. La bonne habitude à prendre consiste donc à vérifier la validité de ton code à chaque fois que tu souhaites entamer une mise en page.

Entre autres, une liste descriptive dl ne peut contenir que des éléments dt et dd et non des div. Il te faut donc revoir la partie html.
Ce qu'il faut savoir aussi, c'est qu'une liste descriptive n'est pas adaptée pour faire un menu. Mieux vaut faire une liste non ordonnée (une pour chaque sous-menu que tu englobes dans une pour le menu)

ex. :

<ul class="menu">
   <li><img src="sousmenu1.png" width="120" height="30" alt="sous-menu 1" />
      <ul>
         <li><a href="lien1.htm">lien 1</a></li>
         <li><a href="lien2.htm">lien 2</a></li>
         <li><a href="lien3.htm">lien 3</a></li>
      </ul>
   <li>
   <li><img src="sousmenu2.png" width="120" height="30" alt="sous-menu 2" />
      <ul>
         <li><a href="lien1.htm">lien 1</a></li>
         <li><a href="lien2.htm">lien 2</a></li>
         <li><a href="lien3.htm">lien 3</a></li>
         <li><a href="lien4.htm">lien 4</a></li>
      </ul>
   <li>
   ...
</ul>

De là, il faut réadapter ton code css et certainement ton code js.