Agrandissement non désiré d'une boîte sous IE

xylo2 · 15 Décembre 2004

Bonjour à tous et merci de me lire. J'ai planché toute la matinée sur un problème qui commence fortement à m'agacer alors voici :

Je veux faire un menu déroulant en CSS. Le résultat fontionne impécablement sous Firefox mais comme d'habitude IE fait des siennes. A savoir que mes sous-menu sont plus larges que mes menus, et que du coup, IE modifie la taille (largeur) d'un menu quand j'ouvre un sous-menu. Pas chouette, je n'arrive pas à l'en empêcher (si seulement le max-width pouvait marcher...)

Alors voici mon code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>

<title>Menu déroulant horizontal</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript"src="menu.js"></script>
	<link rel="stylesheet" type="text/css" href="style_menu_top.css" />
</head>

<body>

<div id="menu">
	<dl>
  <dt onmouseover="montre();"><a href="#">Accueil</a></dt>
	</dl>

	<dl> 	 
  <dt onmouseover="montre('smenu1');"><a href="#">Societe</a></dt>
 	 <dd style="display: none;" id="smenu1">
    <ul>
   	 <li><a href="#">Présentation de la société</a></li>
   	 <li><a href="#">Dates clefs</a></li>
   	 <li><a href="#">Dirigeants</a></li>
   	 <li><a href="#">Partenariats</a></li>
   	 <li><a href="#">Recrutement</a></li>
    </ul>
 	 </dd>
	</dl>


	<dl> 	 
  <dt onmouseover="montre('smenu2');"><a href="#">Solutions</a></dt>
 	 <dd style="display: none;" id="smenu2">
    <ul>
   	 <li><a href="#">Organiser vos projets</a></li>
   	 <li><a href="#">Concevoir pour JAVA</a></li>
   	 <li><a href="#">Mieux développer en JAVA</a></li>
   	 <li><a href="#">Déployer et optimiser vos projets</a></li>
    </ul>
 	 </dd>
	</dl>

	<dl> 	 
  <dt onmouseover="montre('smenu3');"><a href="#">Formation</a></dt>
 	 <dd style="display: none;" id="smenu3">
    <ul>
   	 <li><a href="#">Atouts de Entreprise</a></li>
   	 <li><a href="#">ingénierie de formation</a></li>
   	 <li><a href="#">Liste des formations</a></li>
   	 <li><a href="#">Calendrier des formations</a></li>
   	 <li><a href="#">Centre de formation</a></li>
    </ul>
 	 </dd>
	</dl>

	<dl> 	 
  <dt onmouseover="montre('smenu4');"><a href="#">Services</a></dt>
 	 <dd style="display: none;" id="smenu4">
    <ul>
   	 <li><a href="#">Conseil</a></li>
   	 <li><a href="#">Projets</a></li>
   	 <li><a href="#">Régie spécialisée</a></li>
   	 <li><a href="#">Formation</a></li>
    </ul>
 	 </dd>
	</dl>

	<dl> 	 
  <dt onmouseover="montre('smenu5');"><a href="#">Technologies</a></dt>
 	 <dd style="display: none;" id="smenu5">
    <ul>
   	 <li><a href="#">Eclipse et WSAD</a></li>
   	 <li><a href="#">EJB</a></li>
   	 <li><a href="#">Framework Borneo</a></li>
   	 <li><a href="#">Framework Struts</a></li>
   	 <li><a href="#">Migration VisualAge/WSAD</a></li>
    </ul>
 	 </dd>
	</dl>

	<dl> 	 
  <dt onmouseover="montre();"><a href="#">Clients</a></dt>
	</dl>

	<dl> 	 
  <dt onmouseover="montre();"><a href="#">Contact</a></dt>
	</dl>

</div>

</body>
</html>

voici mon code CSS

body {
	margin: 0;
	padding: 0;
	font-family : verdana,helvetica;
	font-size : 11px;
	background:url(banner_entreprise.gif) top left no-repeat;
}

dl, dt, dd, ul , li{
	margin: 0;
	padding: 0;
}

ul{
	padding-left:15px;
}

#menu {
	position:absolute;
	top:60px;
	right:20px;
	z-index:100; /* Pour que les boîtes puissent aller par-dessus le texte d'en dessous */
}

#menu dl {
	float: left;
	width: 100px; /* sous IE il n'est pas toujours respecté (s'agrandit !!)*/
	border-top:solid #333399;
	border-top-width:10px;
}

#menu dl dt {
	cursor: pointer;
	text-align: center;
	border: solid blue;
	border-width:0px;
	border-right-width:1px;
	margin: 1px;
}

#menu dl dt a{
	color:#364B9D;
	font-weight: bold;
	font-variant:small-caps;
}

#menu dl dd a{
	color:#364B9D;
	font-size:11px;
	font-weight:bold;
}

#menu dl dt a:hover, #menu dl dd a:hover{
	color:#EF5200; /* orange */
}

#menu dl dd {
	display: none;
	border: 1px solid #EF5200; /* orange */
	width:200px; /* C'est ici que ça fait bugger IE en lui faisant élargir ses boîtes */
	padding:5px;
	margin-top:5px;
}

#menu dl dd ul li {
	text-align: left;
	list-style-type:square;
	height:100%;
}

#menu dl dd ul li a, #menu dl dt a {
	text-decoration: none;
	display: block;
}

et voici le contenu du fichier javascript

function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=5; i++) {
  if (document.getElementById('smenu'+i)) {
 	 document.getElementById('smenu'+i).style.display='none';
  }
	}
if (d) {d.style.display='block';}
}

Merci d'avance

Connexion

Agrandissement non désiré d'une boîte sous IE

Sujets conseillés

xylo2

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité