Problème d'élargissement non voulu d'une boîte sous IE

Accueil Forum -> css

Voir le sujet précédent :: Voir le sujet suivant

Auteur

Message

xylo2
frontpage mioche

Problème d'élargissement non voulu d'une boîte sous IE , Posté le: 15-12-2004 12:32

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

Code:

<!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

Code:

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

Code:

Merci d'avance