18041 sujets

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

[Résolu] Problème menu déroulant horizontal sous IE

Bonjour à tous !!

Je me suis servi du tutoriel sur le menu déroulant comme base de mon menu. mais j'ai quelques problemes sous IE 6 (j'ai pas la 7), tout est parfait sous Safari et Firefox.

J'ai un problème de stabilité et un décalage de la premiere <li> d'environ 3px...

Voici un exemple extrait du site :

Exemple

J'ai l'impression que le menu est plus stable dans le "vrai" site...

Voici le CSS
/* General */

* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Arial, Helvetica, sans-serif;	
	font-size:10px;
	background: #EEAAEE;
}

#menu {
	z-index:100;
	position:absolute;
	top:0;
	left:0;
}

#content {
	z-index:1;
	width:550px;
	position:absolute;
	top:24px;
	left:0px;

}
/* ////////////////// MENU  */

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

#menu dd {
	display: none;	
}

#menu li {
	text-align: left;
	padding-left:10px;
	background: #E7EBEE;
}


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

#menu dl#bdg {
	width:32px;
	height:24px;
	float: left;
}

#menu dl#bdd {
	width:33px;
	height:24px;
	float: left;
}

#menu dt {
	cursor: pointer;
	height:24px;
	line-height:24px;
}

#menu dd { 
	background: #E7EBEE;
}

#menu li a, #menu dt a {
	text-decoration: none;
	display: block;
	height: 100%;
	padding-bottom:2px;
	border: 0 none;
}

/* Couleur des sous menus */
#menu dd#smenu1 li a {
	color: #97BE0C;
}

#menu dd#smenu2 li a {
	color: #F39500;
}

#menu dd#smenu3 li a {
	color: #E2007A;
}

#menu dd#smenu4 li a {
	color: #84D0F0;
}
/* Couleur des puces sous menus */
#menu #smenu1 li {
	background-image: url(../pics/puce_verte.gif);
	background-repeat: no-repeat;
}

#menu #smenu2 li {
	background-image: url(../pics/puce_orange.gif);
	background-repeat: no-repeat;
}

#menu #smenu3 li {
	background-image: url(../pics/puce_rose.gif);
	background-repeat: no-repeat;
}

#menu #smenu4 li {
	background-image: url(../pics/puce_bleue.gif);
	background-repeat: no-repeat;
}


Le HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Menu</title>
<script type="text/javascript" src="scripts/menu.js"></script>
<script type="text/javascript">
<!--
window.onload=montre;

//-->
</script>

<link href="css/main.css" rel="stylesheet" type="text/css">
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen">
<![endif]-->
</head>
<body>

			<div id="menu">
				<dl id="bdg">			
					<dt><img src="pics/menu_g.gif" width="32" height="24" border="0"></dt>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre();"><img src="pics/EN/btn_home.gif" alt="home" width="78" height="24" border="0"></dt>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre('smenu1');"><img src="pics/EN/btn_news.gif" alt="home" border="0" width="78" height="24"></dt>
						<dd id="smenu1"  onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
							<ul>
								<li><a href="#">menu 1</a></li>
								<li><a href="#">menu 2</a></li>
								<li><a href="#">menu 3</a></li>
								<li><a href="#">menu 4</a></li>
							</ul>
						</dd>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre();"><img src="pics/EN/btn_brand.gif" alt="home" width="78" height="24" border="0"></dt>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre('smenu2');"><img src="pics/EN/btn_products.gif" alt="home" width="78" height="24" border="0"></dt>
						<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
							<ul>
								<li><a href="#">menu 1</a></li>
								<li><a href="#">menu 2</a></li>
								<li><a href="#">menu 3</a></li>
							</ul>
						</dd>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre('smenu3');"><img src="pics/EN/btn_extra.gif" alt="home" width="78" height="24" border="0"></dt>
						<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
							<ul>
								<li><a href="#">menu 0</a></li>
								<li><a href="#">menu 1</a></li>
								<li><a href="#">menu 2</a></li>
							</ul>
						</dd>
				</dl>
				<dl>
						<dt onmouseover="javascript:montre('smenu4');"><img src="pics/EN/btn_contacts.gif" alt="home" width="78" height="24" border="0"></dt>
						<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
							<ul>
								<li><a href="#">menu 1</a></li>
								<li><a href="#">menu 2</a></li>
								<li><a href="#">menu 3</a></li>
								
							</ul>
						</dd>
				</dl>
				<dl id="bdd">			
					<dt><img src="pics/menu_d.gif" width="33" height="24" border="0"></dt>
				</dl>
			</div>
			<!-- fin de menu -->
			<div id="content">
			Lorem ipsum ....
</div>
			
</body>
</html>


Merci d'avance pour votre aide !!!

Al3x
Modifié par al3x (09 Aug 2007 - 10:48)
Je n'ai pas le courage de tout reprendre, mais en tous cas le problème du décalage de 3px sous IE7 n'est plus présent. Celui de la stabilité est lui, par contre, toujours bien là...

Bon courage à toi
Merci arnaultp

Je crois avoir trouvé le problème enfin j'ai changé de menu entre temps....

Il semblerait que IE 6 mette une taille zarbi pour le lien principal... si je specifie la taille qui va bien bien (celle de l'image) ca ne marche pas mieux MAIS avec un 


width:auto;
height:auto;


magie !!! plus de décalage !!!!
Sujet clos
Aller à