[résolu]Différence de marge avec IE

Hello,

Je débute en CSS. J'ai modifié un modèle de menu que j'ai trouvé, maiss j'ai des différences entre Firefox/Opéra (pour qui ca marche très bien) et IE.

Le code :

ul#tabnav {
font: bold 11px Trebuchet MS,verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #3366FF;
margin: 0;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #CCCCCC;
margin: 2px 2px 0px 2px;
border: 1px solid #3366FF;
}
ul#tabnav li.active {
border-bottom: 1px solid #fff;
background-color: #fff;
}
ul#tabnav li.active a {
color: #000;
}
#tabnav a {
float: center;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
background: #fff;
}

Vous pouvez le voir ici.
Les onglets dépassent en bas sous IE.

Merci,

Salut et bienvenue,

Ce genre de problème provient très souvent d'une différence de marges par défaut sur les balises.

Si tu as le temps (ce que j'espère pour toi), je te conseille la lecture de cette Méthodologie générale et notamment ce billet.

Bonne chance

salut

Brank'Gnol a écrit :

j'ai des différences entre Firefox/Opéra (pour qui ca marche très bien) et IE.

Le code :

#tabnav a {
float: center;
display: block;
color: #666;
text-decoration: none;
[b]padding: 4px;[/b]
}

Sans vraiement chercher très loin je dirrais que c'est un problème récurant avec IE, la gestion du padding.

IE concidère que le padding fais partie de la dimention du tag alors qu'il devrait être extérieur au tag et donc se rajouter. FF et Opéra interprete le code correctement, mais va faloir ruser pour tromper IE.

Bon je pense avoir à peu près résolu le truc (merci pour les liens).

Voilà a quoi ca ressemble...

Un pixel de différence avec IE, mais ce ne se voie pas trop...