[IE 7] - Menu Alsacréation - bug

Salut, j'ai pris ce menu --> http://css.alsacreations.com/modelesmenus/hd1.htm
pour un site web, j'ai modifier un peut les source pour que sa soit armoniser avec.

Voilà je viens de me rendre compte qu'il y avais un bug avec IE 7, le menu déroulant s'affiche mais en dessous d'une boite:



On voit aussi le point du i au travers du background :S

Je me demandais si c'était un problème connu et si on pouvais y remédier, ou si c'est a cause de mon code :S

Code xHTML de la boite qui est par dessus (on veut quelle soit en dessous):

<div id="grandeBoite">
					<div id="boitePartenaire">
						<h3 class="boiteTitre">Partenaires</h3>
						<br /><br /><br /><br /><br /><br /><br /><br />
					</div>
					<div id="boiteNouvelle">
						<h3 class="boiteTitre">Nouvelles</h3>
						<br /><br /><br /><br /><br /><br /><br /><br />
					</div>
				</div>

Code CSS:

div#grandeBoite {	
	width:220px;
	left:535px;
	top:50px;
}

div#boitePartenaire {
	background-color:#37a4b8;
	color:#FFFFFF;
	margin-bottom:50px;
}

div#boiteNouvelle {
	background-color:#37a4b8;
	color:#FFFFFF;
}

Code xHTML du Menu:

<div id="menu">
	<dl id="accueil">
		<dt onmouseover="javascript:montre();">
			<a href="" title="Retour à l'accueil">Accueil</a>
		</dt>
	</dl>
	<dl id="nosService">
		<dt onmouseover="javascript:montre('smenu1');">
			Nos services
		</dt>
			<dd style="display: none;" id="smenu1">
				<ul>
					<li>
						<a href="#">Services aux aidants</a>
					</li>
					<li>
						<a href="#">&Agrave; domicile</a>
					</li>
				</ul>
			</dd>
	</dl>
	<dl id="activite">
		<dt onmouseover="javascript:montre();">
			<a href="">Activit&eacute;s</a>
		</dt>
	</dl>
	<dl id="pourVotreInformation">
		<dt onmouseover="javascript:montre('smenu3');">
			Pour votre information
		</dt>
			<dd style="display: none;" id="smenu3">
				<ul>
					<li>
						<a href="#">Sous-Menu 3.1</a>
					</li>
					<li>
						<a href="#">Sous-Menu 3.2</a>
					</li>
					<li>
						<a href="#">Sous-Menu 3.3</a>
					</li>
					<li>
						<a href="#">Sous-Menu 3.4</a>
					</li>
					<li>
						<a href="#">Sous-Menu 3.5</a>
					</li>
				</ul>
			</dd>
	</dl>
	<dl id="contact">
		<dt onmouseover="javascript:montre();">
			<a href="">Contact</a>
		</dt>
	</dl>
</div>

Code CSS:

/* CSS issu des tutoriels css.alsacreations.com */
#menu dl, #menu dt, #menu dd, #menu ul, #menu li {
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu {
	position:absolute;
}

#menu dl#accueil {
	float:left;
	width:5em;
}

#menu dl#nosService {
	float:left;
	width:9.9em;
}

#menu dl#activite {
	float:left;
	width:5.5em;
}

#menu dl#pourVotreInformation {
	float:left;
	width:11em;
}

#menu dl#contact {
	float:left;
	width:5em;
}

#menu dt {
	cursor:pointer;
	text-align:center;
	font-weight:bold;
	color:#FFFFFF;
	background:#79b6c1;
	border:1px solid gray;/*a supprimer des que la couleur du backgroud hover est changer*/
	margin:1px;
}

#menu dd {
	display:none;
	border:1px solid gray;
}
#menu li {
	text-align:center;
	background:#79b6c1;
}
#menu li a {
	color:#000;
	text-decoration:none;
	display:block;
	height:100%;
	border:0 none;
}

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

#menu li a:hover{
	background:#37a4b8;
}

#menu dt:hover {
	background:#37a4b8;
}

Code du JavaScript (inchanger de celui d'origine...)

<script type="text/javascript">
		<!--
			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>

Voilà! si vous pouviez m'aider sa me donnerais un bon coup de pouce!
Merci!
Modifié par zippy (08 Dec 2006 - 20:51)

Bonjour et bienvenu à toi,

As-tu essayé de mettre de positionner tes éléments et de leur affecter un z-index ?
Modifié par Cygnus (09 Dec 2006 - 11:13)

Oui c'est la première chose a laquelle j'ai pensée, mais vu que c'était la première fois que j'en est eu besoin j'ai p-t fait une erreur parce que ça na pas fonctionner

Ok...

Bon, alors le mode opératoire est le suivant :
Tu dois positionner les éléments que tu veux ordonner. Si ce n'est pas déjà fait, utilise un position:relative; pour les composants. Il ne te reste plus qu'à ajouter un z-index dont le chiffre le plus élevé sera celui de l'élément du dessus.

En reprendant ton code, ça devrait donner :

#grandeBoite {
position:relative;
z-index:1;
}

dd {              /* ce sera appliqué à tous les éléments dd */
position:relative;
z-index:100;
}

Voilà...

salut, merci de m'avoir répondu sa marche pas malheureusement, mais je crois que j'ai compris pourquoi:

div#banMenu {
	position:relative;
	margin-left:174px;
	margin-top:-174px;
	margin-bottom:0px;
}

<div id="banMenu">
					<div>
						<img src="img/bantitre.jpg" />
					</div>
						<?php include("inc/menu.inc") ?>
				</div>

sa change un peut la donne et j'avais pas pensée aller aussi haut, en fait je viens juste de le remarque

avec ce nouveau élément j'ai trouver comment faire pour que le menu passe au dessus, malheureusement sa cause un nouveau bug a mes 2 div (partenaire et nouvelles) (lors du changement de résolution) je vais essayer de le régler au pire je viens refaire un p'tit tours par ici
encore merci

Hello,

Puisqu'il s'agit d'un problème de mise en forme (donc de CSS), et non de XHTML, je déplace le sujet dans le bon salon