Menu horizont al parfait IE mais pas sur Firefox

Question

rotamagus

24 Jul 2007 à 15:05

Bonjour à tous,

Nouveau sur ce site, je souhaiterai vous solliciter pour une aide. Ayant repris ce super script de menu déroulant horizontal, je l'ai adapté pour qu'il fonctionne sur IE. Mais je ne sais pourquoi, mon menu par directement vers la gauche sous firefox.
Pourrais-je avoir une piste pour m'aider à corriger ce problème ?

Voici le bout de code pour IE

body {
margin: 0;
padding: 0;
background: black;
font: 80% verdana, arial, sans-serif;
margin: 5px 0 10px 0;
text-align: center;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 6px;
left: -280px;
margin-left: auto;
margin-right: auto;
z-index:100;
width: 500px; /* correction pour Opera */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 10px;

}
#menu dl {
float: left;
width: 100px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #fff;
border: 0px solid gray;
margin: 0px;
}
#menu dd {
display: none;
border: 0px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #fff;
}
#site {
position: absolute;
z-index: 1;
top : 10;
left : -350;
color: #000;
background-color: #fff;
padding: 5px;
border: 0px solid gray;
width: 300px;
}
-->
</style>
</head>

<body>

<table width="981" height="496" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#ffffff">
<tr>
<td width="981" align="center" valign="top"><table width="979" height="496" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="384" rowspan="2" align="left" valign="top" bgcolor="#000000"><img src="images/logodiamprest.jpg" width="380" height="104" alt="logo" /></td>
<td width="595" height="44" align="center" valign="top" bgcolor="#ffffff"><table width="590" border="0" align="center" cellpadding="0" cellspacing="0" id="site" name="site">
<tr>
<td height="41" align="left" valign="top"><div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Diamant<br />
blanc</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="db_histoire.html" target="_parent">Histoire et commercialisation</a></li>
<li><a href="db_situation.html" target="_parent">Situation géologique</a></li>
<li><a href="db_propriete.html" target="_parent">Propriétés</a></li>
<li><a href="db_caractere.html" target="_parent">Caractéristiques</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');"><a href="#">Diamant <br />
de couleur</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="dc_couleurs.html" target="_parent">Histoire et commercialisation</a></li>
<li><a href="dc_situation.html">Situation géologique</a></li>
<li><a href="dc_origines.html" target="_parent">Propriétés</a></li>
<li><a href="dc_carateres.html" target="_parent">Caractéristiques</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');"><a href="#">Pierres précieuses</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="emeraude.html" target="_parent">Emeraude</a></li>
<li><a href="rubis.html" target="_parent">Rubis</a></li>
<li><a href="saphir.html" target="_parent">Saphir</a></li
></ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');"><a href="#">Pierres fines</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="pierres_fines.html#quartz">Quarts</a></li>
<li><a href="pierres_fines.html#grenat">Grenat</a></li>
<li><a href="pierres_fines.html#tourmaline">Tourmaline</a></li>
<li><a href="pierres_fines.html#beryl">Béryl</a></li>
<li><a href="pierres_fines.html#topaze">Topaze</a></li>
<li><a href="pierres_fines.html#spinelle">Spinelle</a></li>
<li><a href="pierres_fines.html#peridot">Péridot</a></li>
<li><a href="pierres_fines.html#tanzanite">Tanzanite</a></li>
<li><a href="pierres_fines.html#hauyne">Haüyne</a></li>
<li><a href="pierres_fines.html#lolite">Lolite ou Cordierite</a></li>
<li><a href="pierres_fines.html#opale">Opale</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu5');"><a href="#">Gemmologie</a></dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li><a href="traitement.html" target="_parent">Traitement</a></li>
<li><a href="lexique.html" target="_parent">Lexique</a></li>
<li><a href="bibliographie.html" target="_parent">Bibliographie</a></li>
</ul>
</dd>
</dl>

</div>

Merci à tous pour votre intervention

rotamagus

dominique

24 Jul 2007 à 15:09

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

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

Menu horizont al parfait IE mais pas sur Firefox