Pb de chevauchement des icônes de mon menu sous Firefox - Allez svp!

Bonjour à tous,

Mon site www.rtbt.fr à un pb de menu déroulant vertical. Tout se passe très bien sous IE, mais sous Firefox, les différentes icônes se chevauchent rendant le menu illisible.

J'utilise une mise en forme CSS, avec une fonction Include qui appelle ce menu dans la page Index.

Pourriez vous m'aider?

Voici le code que j'utilise :

 
<style type="text/css">
<!--

DL {PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;MARGIN: 0px;PADDING-TOP: 0px;LIST-STYLE-TYPE: none;z-index: 100;}

DT {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;}

DD {PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;MARGIN: 0px;PADDING-TOP: 0px;LIST-STYLE-TYPE: none;font-family: "Tempus sans ITC";font-size: 16px;font-weight: bold}

UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}

LI {PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 0px;MARGIN: 0px;PADDING-TOP: 0px;LIST-STYLE-TYPE: none;background-color: rgb(69%,18%,7%);font-size: 12px;border: 2px solid #000000}

#menu {WIDTH: 150px; POSITION: relative; TOP: 1em}
#menu DT {FONT-WEIGHT: bold; BACKGROUND: #a9bfcb; MARGIN: 0px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; LINE-HEIGHT: 20px; BORDER-BOTTOM: gray 1px solid; HEIGHT: 20px; TEXT-ALIGN: center}
#menu DD {MARGIN-TOP: -1.2em;Z-INDEX: 100;BACKGROUND: a9bfcb;LEFT: 8.5em;WIDTH: 11em;POSITION: absolute;border: 1px solid #000000}
#menu UL {PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px}
#menu LI {FONT-SIZE: 90%;LINE-HEIGHT: 18px;HEIGHT: 18px;TEXT-ALIGN: center}
#menu LI A {DISPLAY: block; COLOR: #000; TEXT-DECORATION: none}
#menu DT A {DISPLAY: block; COLOR: #000; TEXT-DECORATION: none}
#menu LI A:hover {TEXT-DECORATION: none;background-color: rgb(88%,65%,4%);

     -->
</style>

</head>

<!-- Menu  -->

<DL id=menu>

    <DT onmouseover="javascript:montre('smenu1');
           "onmouseout=javascript:montre();>
           <a href="index.php?page=page1"                onMouseOut="MM_swapImgRestore()" 
onMouseOver="MM_swapImage('Image10','','imagesboutons/on0.gif',1)">
<img src="imagesboutons/off0.gif" name="Image10" width="150" height="36" border="0" lowsrc="imagesboutons/off0light.gif"></a> 
    </DT>
                   <DD id=smenu1 onmouseover="javascript:montre('smenu1');"onmouseout=javascript:montre();>
     <UL><LI><A href="index.php?page=page1">Introduction</A> </LI></UL>
     <UL><LI><A href="index.php?page=page1">Quelques particularités  </A>/LI> </UL>
                   </DD>
  
  <DT onmouseover="javascript:montre('smenu2');" 
  onmouseout=javascript:montre();> <a href="index.php?page=page2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','imagesboutons/on1.gif',1)"><img src="imagesboutons/off1.gif" name="Image11" width="150" height="36" border="0" lowsrc="imagesboutons/off1light.gif"></a>
 </DT>
  
  <DT onmouseover="javascript:montre('smenu3');" 
  onmouseout=javascript:montre();> <a href="index.php?page=page3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','imagesboutons/on2.gif',1)"><img src="imagesboutons/off2.gif" name="Image12" width="150" height="36" border="0" lowsrc="imagesboutons/off2light.gif"></a>
</DT>
  .
  . et ainsi de suite
  .
</DL>
		
</BODY></HTML>
</body>
</html>

Je sais ça doit être un peu le bordel, mais bon..!
Modifié par lagige (23 Nov 2006 - 12:34)

Bonjour et bienvenue lagige,

Peux-tu éditer ton message pour encadrer le code comme indiqué dans la FAQ ou dans les règles lorsque tu t'es inscrit ? Merci d'avance.