18041 sujets

Questions générales et questions de débutants

Menu deroulant V pb affichage IE/FF

Bonjour à tous,

tout d'abord, un grand merci pour votre site génial et merci d'avance à ceux qui prendront le temps de lire ce post

bon je débute depuis une semaine,j'essaie de me débrouiller tous seul mais la franchement je sèche: j'ai utilisé la recherche, le faq j'ai appliqué plusieurs trucs (j'ai essayé aussi cette version http://moncastel.9online.fr//menualsa/menu-hrz.htm; le reset http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) que j'ai trouvé mais ça n'a toujours pas résolu mon soucis:

bref j'ai utilisé ce tuto:http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm

le menu s'affiche correctement sous IE mais sous FF !? normalement C'est qui IE qui crée des bug? je dois certainement faire une grosse erreur...

upload/13270-ff.jpg upload/13270-IE.jpg

ma feuille de style:
.noJs{color:red}
.dynmenu{
 display:none;
 position: absolute;
 z-index:100;
}

#menu {
	top: 200px;
	width: 105px;
	margin-top: 10px;
	position: absolute;/* bug IE */
	z-index: 1;
	margin-left: 0px;
	padding: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	left: 0px;
}
}

#menu dt {
	cursor: pointer;
	margin: 0px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	font-family: "Century Gothic";
	color: #FF4E02;
	background-color: #FFFFFF;
	font-size: 1em;
	padding: 0px;
}
#menu dd {
	border: 1px solid #FF4E02;
	font-size: 1.2em;
	color: #FFFFFF;
	background-color: #FE4E02;
	font-family: "Century Gothic";
	width: 9em;
	
}

#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	border: 0 none;
	font-family: "Century Gothic";
	background-color: #FF4E02;
}
#menu li a:hover, #menu dt a:hover {
	color: #7ECFE4;
	background-color: #FFFFFF;
	font-weight: bold;
	margin-left: 5px;
}


ma feuille html

<head>

<link rel="stylesheet" type="text/css" href="sansJS.css" />
<link rel="stylesheet" type="text/css" href="arcots5.css" / media="screen">
<link rel="stylesheet" type="text/css" href="reset.css" />

 <style type="text/css">
      /*
      <![CDATA[*/ span.c1 {color: red} /*]]>
      */
    </style>
<!-[if lte IE 6]><style> #menu li,#menu dt{height:0;/* confère le layout */</style><![endif]->

</head>


<body>


<div id="conteneur">

	  <div id="header"></a>

</div>

	  <div id="haut">
	  
		
			</ul>
		
	        <span class="Style3">...<strong>V</strong><em>os r&eacute;seaux, &agrave; la mesure de nos comp&eacute;tences. </em></span></div>
      <div id="haut2">	  </div>
	  
<script type="text/javascript">
//<![CDATA[
<!--
//active la feuille de style dynamique
document.getElementsByTagName("link")[0].href="dynmenu.css"
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
//]]>
</script>
	  <div id="menu">
	  
	  	
		</dt><dt onmouseover="montre('smenu1');" >Faire Autrement</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Le mot du directeur </a></li>
					<li><a href="#"> Chiffres clefs </a></li>

					<li><a href="#">Domaines d'intervention </a></li>
					<li><a href="#">Nos priorités </a></li>
				</ul>
				</dd>
		</dt><dt onmouseover="montre('smenu2');">Actualité</dt>
		

		</dt><dt onmouseover="montre('smenu3');">Produits</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Tuyaux  en Ame Tole</a></li>
					<li><a href="#">Coques CCV  </a></li>
				</ul>
			</dd>

		</dt><dt onmouseover="montre('smenu4');">Métiers</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">R&eacute;paration de fuites </a></li>
					<li><a href="#">Techniques sans tranch&eacute;es </a></li>
					<li><a href="#">Fon&ccedil;ages </a></li>
				</ul>
				</dd>
		</dt><dt onmouseover="montre('smenu5');">Contactez-nous</dt>
		</dt><dt onmouseover="montre('smenu6');"onmouseout="montre();">Plan du site</dt>
		</dt>
			
  </div>
  
	  
	  <div id="centre" onmouseover="montre();">
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p>&nbsp;</p>
	    <p><br />
        </p>
  </div>
	  
	  <div id="pied"></div>

</div>
	  
</body>
</html>

Smiley bawling

Merci de bien vouloir me donner une petite réponse
Modifié par Encore (16 Jul 2007 - 19:36)
Oui c'est bien IE qui ne respecte pas les recommandation W3C. Mais dans le cas présent, il fonctionne bien car chaque élément ne peut se superposer dans IE d'où l'affichage correct.

Pour résoudre ton problème, tu dois placé l'insruction : "float: left;" dans l'entité dl :

#menu dl{
	float: left;
	padding-bottom: 0px;
	width: 100%;
	cursor: pointer;
}
Sujet clos
Aller à