Soucis avec des onglets

Bonjour !
j'ai fait des onglets grace à un très bon article de pompage.net.

Cependant, sur Internet Explorer et Opera, plusieurs décalages ont lieu !

Enfin, comme on dit, un bon code vaut mieux qu'un long discours:

Partie HTML:

<ul id="onglets">
    <li id="active"><a>Bienvenue</a></li>
    <li><a href="#">Éditorial</a></li>
    <li><a href="#">Nouveautés</a></li>
</ul>

Rien de plus simple.
Coté CSS, ca se gate, j'ai un peu tout mélangé, ce n'est pas propre du tout, voyez plutôt:

Partie CSS:

li{
float:left;
margin-top:-3px;
}

#onglets {
height:28px;
border-bottom:#3D4546 1px solid;
}
#onglets li {
position:relative;
top:8px;
float:left;
background:url(images/onglets/gauche.jpg) no-repeat left top;
padding:0 0 0 6px;
}
#onglets a {
float:left;
display:block;
background:url(images/onglets/droite.jpg) no-repeat right top;
padding:5px 15px 2px 6px;
text-decoration:none;
font-weight:bold;
color:#454545;
}
#onglets > ul a {width:auto;}
#onglets a {float:none;}
#onglets a:hover {color:#D8EBFE;}
#onglets li:hover, #onglets li:hover a {
background-position:0% -23px;
color:#D8EBFE;
}
#onglets li:hover a {
background-position:100% -23px;
}
#onglets li#active {
border-bottom:none;
position:relative;
top:1px;
background:url(images/onglets/gauche2.jpg) no-repeat left top;
margin:0;
padding:0 0 0 6px;
}
#onglets li#active a {
font-size:16px;
float:left;
display:block;
background:url(images/onglets/droite2.jpg) no-repeat right top;
padding:5px 15px 3px 6px;
text-decoration:none;
font-weight:bold;
color:#D8EBFE;
}

Voici les décalages sur les navigateurs:

Modifié par Sylvain (23 Sep 2005 - 15:11)