CSS padding IE différent de Mozilla

[okuteur]

boujour a tous

je voulais savoir si il y avait une astuce pour avoir des div de la meme taille avec IE et Mozilla ( et les autre navigateur pourquoi pas )

car j'ai une div de 100px avec un padding de 20px qui s'affiche bien sous IE et la meme sous mozilla qui a en faite une taille total de 120px au lieu de 100px prevu.

merci pour vos renseignements

 

[moktoipas]

en fait techniquement, le probleme est inverse.. elle s'affiche bien sous Mozilla et mal sou IE...

http://css.alsacreations.com/Bases-et-i ... le-partout

Les bugs des navigateurs

[...]

Il existe donc des différences qui peuvent être importantes du fait des bugs de certains navigateurs et qui n'ont pas de rapport avec le langage utilisé (ce problème est le même que votre site soit en XHTML / CSS qu'en HTML 3.2 par exemple)

La plus fréquente est ce qu'on appelle le "Modèle de boites Microsoft" : Internet Explorer interprête à sa manière les dimensions des boites (c'est à dire les blocs avec padding et border).

 

[moktoipas]

http://openweb.eu.org/articles/dimensions_boites_css/

 

[fbparis]

voila, jsuis bien curieux de savoir ce qu'en disent les pro firefox

moi meme j'ai beaucoup enrage a cause de ca

 

[moktoipas]

fbparis >> un pro firefox a parlé... Et mon opinion est: c'est pas firefox qui ne suis pas les recommendation du w3c.

 

[fbparis]

d'accord d'accord

on peut neanmoins admettre que pour le coup, la demarche de microsoft est quand meme la meilleure et la plus logique, surtout quand on veut utiliser le % comme unité de mesure, ce qui est courant

par exemple si je veux un div de 20% de largeur avec une bordure de 1px et un padding de 1ex je suis oblige de faire une boite imbriquee pour les firefox et autres...

 

[moktoipas]

par exemple si je veux un div de 20% de largeur avec une bordure de 1px et un padding de 1ex je suis oblige de faire une boite imbriquee pour les firefox et autres...

ben si tu veux faire ca, tu fais un div de 20% de largeur avec une bordure de 1px et un padding de 1ex et il s'affiche bien sous firefox puisque la notion de bien est celle definie par le W3c...

Et je trouve quec'est la demarche du W3c la plus logique.

Si tu fais un boite de 20% de largeur, avec une bordure de 10px un padding de 10 px et un margin de 10px, tu obitent vraiment une boite dont le contenu fait 20% de la largeur.
Ce qui est bien plus logique qu'une largeur de 20%+10px sous IE alors que l'attibut width (qui porte bien son nom !) vaut 20% ....

 

[okuteur]

merci moktoipas pour la lecture, je vais essayer tout ca

mais il est vrai que pour une fois je trouve IE plus logique ...

 

[Ohax]

mozilla firefox est beaucoup plus avancé que ie pour les css ...

 

[moktoipas]

Merci Ohax, j eme sentait seul :S

padding: is just like a margin, except it's the white space between the margin (and border) and the actual content.

Donc les padding sont des marges interrieures.
La marge exterieure compte dans la taille d'une boite ? Non.

Alors pourquoi IE compte cette marge ?Et compter le padding comme comptant aussi pour la largeur de la boite reviens a faire une grosse erreur de logique.

Sur ce dessin, les paddings sont les zones entre les deux bordures violettes.

http://www.davesite.com/webstation/css/chap09.shtml

 

[petit-ourson]

il me semblait que cela ne déconnais plus en mode strict sous IE > 5.5

Si tu fais un boite de 20% de largeur, avec une bordure de 10px un padding de 10 px et un margin de 10px, tu obitent vraiment une boite dont le contenu fait 20% de la largeur.
Ce qui est bien plus logique qu'une largeur de 20%+10px sous IE alors que l'attibut width (qui porte bien son nom !) vaut 20% ....

Tout a fait d'accord ;o)

 

[moktoipas]

il me semblait que cela ne déconnais plus en mode strict sous IE > 5.5

c'est exact, d'ailleur je n'ai jamais rencontré ce probleme grace à ca !
Vive le HTML strict !

 

[moktoipas]

Le DocType switching : forcer l'une ou l'autre interprétation des dimensions

Le résultat d'un positionnement précis de plusieurs boîtes adjacentes peut donc être très différent selon le calcul effectué. Comment savoir quel modèle de boîte sera appliqué par quel navigateur ?

* les navigateurs périmés type IE 4.x et Netscape 4.x ne sont pas à prendre en compte puisqu'ils n'ont pas d'implémentation suffisante des propriétés CSS ;
* IE 5.x Windows ne connaît que le modèle Microsoft ;
*

les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x…) exploitent la technique du DocType Switching, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher. Pour résumer, ces navigateurs récents opteront pour :
o le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ;
o le modèle Standard en présence d'une DTD HTML strict sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Ou d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ou d'une DTD XHTML quelle qu'elle soit, sur le modèle : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ou <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .

 

[okuteur]

je crois avoir resolut mon probleme merci pour tout les bon sites de references .

 

[MarvinLeRouge]

il me semblait que cela ne déconnais plus en mode strict sous IE > 5.5

Ohla rectification : le modèle de boîte standard est implémenté. Pour ce qui est de "déconner", crois-moi, il reste encore de quoi faire.

 

[pika28]

Re:

je crois avoir resolut mon probleme merci pour tout les bon sites de references .

Pourrais tu nous dire comment tu as fais?

 

[c4man]

Bonsoir, je ne suis ni pro-ie ni pro-ff, je m'arrange pour avoir un code propre et je constate qu'il est possible de faire pratiquement (presque) tous les designs possibles sans aucune différence sur tel ou tel navigateur, il suffit de les connaître...
En général appliquer un
*{margin: 0 padding: 0;} en début de feuille css facilite grandement le travail