Menu qui ne fonctione plus sou FireFox!

Bonjour a tous!

J ai cree un menu horizontal ( fortement inspirere par votre tuto sur les menu dropdown en css et java, Merci Alsacreation! ). Il est conforme au standard w3c. il fonctionne sous IE sans aucun probleme mais sous FireFox, il est tout buguer! Vous Pouvez voir ICI.

Voila si quelqu un avait une idee du probleme, car moi la je seche.

D'avance merci
++

Oups voila le Css

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


#menu {/*division qui contient le menu*/
position:relative;
font: 13px arial, sans-serif;
text-decoration: none;
position:absolute;
margin-left:5px;
z-index:100;
width: 747px;
height:24px;

}

#menu dl {
float: left;
height:auto;
width: 145px;
}


#menu dl dt {
height:22px;
}

#DrBt {
}


#menu dl dt a {
height:23px;
width:100%;
display:block;
padding-top:4px;
margin-top:4px;
color: #ccc;
text-align: center;
font-weight: bold;
}

#ab a:hover{       /*boutton de gauche(arrondi)*/
background-image:url(image/Bt1Ro.gif);
background-repeat:no-repeat;
background-color: #607095;
color:#036;
}

#menu dl dt a:hover{
height:80%;
width:90%;
background-color: #fff;
color:#036;
}

/*style du sous menu*/
#menu dl dd {
width:125px;
margin-top:-6px;
margin-left:10px;
position:absolute;
display: none;
}

#menu li {
border-top:1px solid #036;
border-bottom:1px solid #036;
width:100%;
text-align: center;
background: #036;
}


#menu li a  {
text-decoration: none;
color: #ccc;
display: block;
height: 100%;
width:100%;
border-top:1px solid #036;
border-bottom:1px solid #036;
}


#menu li a:hover, #menu li a:focus, {
height:80%;
width:96%;
margin:0;
padding:0;
background: #000033;
height:100%;
color: #fff;
border-left: 5px #000033 solid;
border-top:1px solid #000033;
border-bottom:1px solid #000033;
}

Bonjour et bienvenue m4nu

Il existe un bouton "Editer" sur chacun de tes posts qui permet de le modifier plutôt que de le multiplier

Edité : Voilà, j'ai fait un peu de ménage
Modifié par dominique (01 Jun 2005 - 09:43)

Bonjour ;
après quelques vérifications, ça bugg aussi sous iE à mon avis... Il semble que les navigateurs se perdent un peu dans la lecture de ce qu'ils doivent faire sur les liens... puisqu'ils "lisent" pour une situation, puis une autre, et doivent revenir sur la précédente...
Je te conseille de regrouper les infos pour les liens par type ou situations de liens : les infos pour les liens en #menu dl dt, puis celles pour #ab, puis celles pour #menu li etc... Ensuite, tu en indiques certains en situation "hover", sans indiquer la situation de départ semble-t-il (#ab a:hover).
Pour avoir une réaction correcte et précise, pour tes liens, tu dois suivre cet ordre (donné sûrment sur un autre post, me semble-t-il) :
a:link ; a:visited; a:hover; a:active.
Ensuite enfin, vérifie qu'il n'y ait pas de contradiction entre tes différents éléments (hauteur de tes "dl", et de tes "a", par exemple).
Voilà, bon courage

Merci dominique pour cet info...Je suis desole d'avoir fait le boulet. En faite j ai annule l'envoi du post, mais celui-ci est quand meme passe. Enfin...Voila Mille excuses.

Merci a toi Macpom, pour le temps que tu as passe sur mon code...
J ai bien compris ton conseil, mais le truc est que l'ordre est respecte.
Par example je creer un boutton class .Bt1, qui a les caracteristiques de base de tous les bouttons, :link :hover etc.. Et apres je rajoute pour certain, une #id qui ne change qu'une fonction du boutton (par example #ab a:hover, ne change que la valeur hover du boutton de gauche, pour obtenir l'effet d'arrondi ). Donc ma question est la suivante,
Cette methode est elle valide, ou dois-je systhematiquement respecifier (comme tu le dis) les valeurs :link :active etc, bien qu'elle soit deja declarees dans la classe de base du boutton.

2 eme chose qui je pense, peut-etre la cause, de ce bug:

Est ce correct?

div #1{
height:28px;
width:100px;
border:1px solid #000;
}   

div #2 {/*#2 est place dans #1! */
height:28px;
width:100px;
border:1px solid #000;
}  

ou dois-je faire:

div #1{
height:28px;
width:100px;
border:1px solid #000;
}   

div #2 {/*#2 est place dans #1! */
height:26px;
width:98px;
border:1px solid #000;
}  

D'avance merci a tous pour votre aide

@++

Et tu as choisi quoi ? ça donne quoi ?