[CSS] Padding, width et internet explorer

Bonjour,

J'ai un problème avec des <li> comprenant des attributs widths et padding.

li {
width:100px;
padding:0 20 0 20;
}

Sous moziilla aucun problème il donne bien comme je veux (donc logiquement 100+20+20=140) seulement sous internet explorer il est beaucoup plus petit (il doit surement faire 100 padding compris).

J'avais lu un article à l'époque qui parlait de ce problème (explorer inclus les paddings dans la largeur) et ils parlaient d'une astuce pour contourner ce problème mais impossible de remettre la main dessus.

Quelqu'un aurait-il une idée sur la marche à suivre pour un fonctionnement correcte sous Mozilla et sous Internet explorer ?

Merci d'avance.

la solution passe par ce qu on appel le doctype switching.

En fait il s agit de mettre un doctype xhtml a sa page pour que ie prenne (en théorie) le meme modele de boites que firefox.

Pour plus d'infos :
http://standblog.org/blog/2003/09/24/93113046

c est sensiblement le meme contenu ;)

Autre solution sinon ca serait de définir le padding que IE prendrais avec un "_". Ce caractère permet que seul IE reconnaisse le paramètre poassé derrière!!
exemple:

Code:

---

1 2 3 4 5

li { width:100px; padding:0 20 0 20; _padding:0 40 0 40; }

---

tu peux aussi utiliser !important que ie n'applique pas :

Code:

---

1 2 3 4 5

li { width:100px; padding:0px 20px 0px 20px !important; padding:0px 40px 0px 40px; }

---

c'était l'astuce avec le _attribut que j'avais du voir.

ça marche nickel, merci bien.

Réctification, l'utilisation de !important passe la validation W3C tandis que _attribut ne passe pas, donc préferrez le !important :)