Bonjour,

voila l'adresse de la page qui pose problème :

http://traz0m.olympe-network.com/Linux_mdp.html

essayez sous IE et ensuite sous Firefox  qui est le résultat attendu à part les liens ici et nous contacter qui devraient être en rouge quand on passe dessus et vert lime quand on clique dessus mais ces deux liens prennent les caractéristiques des liens du menu horizontale ( blanc / noire ) pourtant ils ont leur propre règle css .

voila mon fichier .css pour cette page je serais très reconnaissant d'une aide car je ne trouve pas de réponse sur internet :

body
{
   background-color:#303D58;
   width:90%;
   font-family:Arial, "Times New Roman", Times, sans-serif;
   margin-left:auto;
   margin-right:auto;
}


#menu1, #menu1 ul
{
   padding: 0;
   margin: 0;
   list-style-type: none;
   line-height: 21px;
   text-align: center;
}

#menu1
{
   font-weight: bold;
   font-family: Arial;
   font-size: 12px;
}

#menu1 a
{
   display: block;
   padding: 0;
   background: #000;
   color: #fff;
   text-decoration: none;
   width: 372px;
}

#menu1 li
{
   float: left;
   border-right: 1px solid #fff;
}

html>body #menu1 li
{
   border-right: 1px solid transparent;
}

#menu1 li ul
{
   position:absolute;
   width: 374px;
   left: -999em;
}

#menu1 li ul li
{
   border-top: 1px solid #fff;
}

html>body #menu1 li ul li
{
   border-top: 1px solid transparent;
}

#menu1 a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}

#menu1 li:hover ul, #menu1 li.sfhover ul 
{
        left: -999em;
}

#menu1 li:hover ul,  #menu1 li.sfhover ul 
{
   left: auto ;
    min-height: 0;
}

a
{
   color:#F7E444;
   text-decoration:none;
}

a:hover
{
   color:red;
   font-weight:bold;
}

a:active
{   
   background-color:lime
}

strong
{
   color:red
}

h1
{
   margin-top:50px;
   text-align:center;
   color:#0099FF;
}

h2
{
   text-indent:-50000px;
}

#img
{
   clear: left;
   margin-top: 70px;
   height: 500px;
   width: 400px;
   border: 2px dotted #F7E444;
   background: url("linux.jpg") no-repeat top left white;
   float: left;
}

#corp
{
   margin-left: 450px;
   margin-top: 70px;
   padding:50px;
   border:2px dotted #F7E444;
   color:#E3AB57;
   background-color:black;
   text-align:center;
   line-height:30px;
}   

#pied_de_page
{
   clear:left;
   margin-top:70px;
   padding:5px;
   background-color:black;
   color:#E3AB57;
   text-align:center;
   border:2px dotted #F7E444;
}

et aussi le tout petit javascript je ne sais pas si celui-ci peut poser problème :

<code>sfHover = function() {
        var sfEls = document.getElementById("menu1").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</code>

Je souhaiterais donc savoir comment faire pour avoir la même chose sous Firefox que sous IE et au niveau des liens pourquoi prennent t-ils les caractéristiques de #menu1 a au lieu de a n'étant pas dans dans ce <div id="menu1"> ?

cordialement.