Affichage sous-menu (css+js) erroné sous IE.

Bonjour à tous,

J'utilise l'exemple de menu CSS avec JavaScript situé sur Alsacreations (merci au passage).

Après l'avoir adapté (notamment changé le style dd -le conteneur du menu- en absolute pour pouvoir afficher mon menu par dessus le site), il s'avère que j'ai perdu la compatibilité avec IE. Sous Firefox, tout fonctionne correctement.

Voici les affichages produits :

FF :
http://sbibuilder.free.fr/bordel/css/ff_ok.png

IE :
http://sbibuilder.free.fr/bordel/css/ie_no.png

Apparament, c'est le width de la balise dd qui pose problème. J'ai mis 15.8% (la largeur du block au dessus, dt qui est la racine du menu) pour Firefox et ça fonctionne correctement. Sous IE, je dois mettre cette valeur à 100% pour avoir la même taille que sous Firefox, mais le problème c'est que sous ce dernier, le sous-menu prend toute la page !

Je me retrouve donc face à un dilemme : non seulement le menu fonctionnait avant sous les deux, mais en plus dans ma configuration, c'est soit Firefox, soit IE.

Voilà si vous pouvez éclairer ma lanterne J'espère avoir été clair dans mes propos car j'ai du mal à décoder tout ça car je suis plutôt débutant en programmation orientée Internet.

Voici le CSS concerné :

/*
	SiZ!Engine v0.1a
	by [big_fury]SiZiOUS
	08/02/05
	
	CSS inspiré des tutoriels de  http://css.alsacreations.com/
 
	Exemple ici :  http://css.alsacreations.com/modelesmenus/hd1.htm
 
*/

/* Toutes les boites par défaut.
	dl : Conteneur de menu.
	dt : Boite contenant la racine du menu.
	dd : Boite contenant tous les éléments de menus (le menu lui même)
	ul : Liste de sous-menus
	li : Un élément menu
	dt a : Il s'agit de racine de menus sans sous menu, mais avec un lien (exemple : Accueil). */
#menu dl, dt, dd, ul, li {
	margin: 1px; /*espace entre chaque menu racine */
	padding: 0;
	list-style-type: none;
	
	font-size: 14px;
	font-family: Verdana, Arial, sans-serif;
}

/* Cet élément désigne un conteneur pour chaque racine de menu. */
#menu dl {
	float: left; /* alignement des blocks sur la gauche (en ligne) */
	width: 18%;
	margin-left: 8px;
	padding: 1.5px;
}

/* Cet élément désigne une racine de menu, avec un sous menu. (c'est à dire qui affichera un menu déroulant). */
#menu dt {	
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #ccc;
	border: 1px solid gray;
	margin: 1px;
}

/* Cet élément désigne un conteneur pour l'affichage du menu. Il englobe tous les éléments. */
#menu dd {
	display: none;
	border: 1px solid gray;
	
	background : white;
	
	width: 15.8%; /* PROBLEME !!! */
	position: absolute;
}

#menu li {
	text-align: center;
	background: #fff;
}

#menu a {
	font-family: Verdana, Arial, sans-serif;
}

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

/* Tchernobylete incomprehensible, le style n'est pas appliqué correctement il est redefini ici ?! */
#menu dt a {
	color: #000;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	
	font-size: 14px;
	/*font-family: Verdana, Arial, sans-serif;*/
}

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

Voici le HTML :

<div id="menu">
<dl>
	<dt onMouseOver="javascript:montre();"><a href="#" title="Retour à l'accueil">Accueil</a></dt>
</dl>

<dl>		 	
	<dt onMouseOver="javascript:montre('smenu1');">Resources</dt>
		<dd id="smenu1" onClick="javascript:cacherTout();">
			<ul>
				<li><a href="#">Downloads</a></li>
				<li><a href="#">Tutorials</a></li>
				<li><a href="#">Documents</a></li>
				<li><a href="#">Links</a></li>
			</ul>
		</dd>
</dl>
...
</div>

Merci à vous
Modifié par SiZiOUS (08 Feb 2006 - 23:21)