IE 5.01, IE5.5, IE6, Firefox, Opera, Netscape & Co - Comportements

Salut à tous,
Dans le cadre d'un stage, j'ai coder (CSS / XHTML) le design d'un site.
L'entreprise m'a demandé de faire quelque chose au maximum compatible avec les différents navigateur existants, et surtout avec IE.

Certaines différences de comportements de ces navigareurs m'ont posées de nombreux problèmes.
Etant donné que je débute encore, je viens vous parler ici de ce que j'ai cru comprendre, pour savoir si j'ai bon ou si je me trompe , votre m'évitera peut-être de m'enfoncer dans l'erreur.

Concernant le padding d'une DIV :
Sous IE6, Firefox, Mozilla, Opera et Netscape, (j'ai testé les 4 derniers browsers avec leurs dernières versions) il semblerait que le padding d'une DIV s'ajoute à sa largeur.
Autrement dis, si je veux une DIV de 100px de large, mais en lui appliquant un padding-left de 5px, et bien pour que ma DIV fasse bien 100px à l'affichage, je devrai mettre un width:95px.
Par contre sous IE5.01, et bien ce padding na s'ajoute pas à la largeur...
Donc si j'ai 100px sous IE6, de cette façon j'en ai 95 sous IE5.01

Dans mon cas, un client pincipal de l'entreprise utilise IE5.01, donc pour avoir une compatibilité avec ce navigateur, mais aussi avec les plus récents, et bien je n'ai pas trouvé d'autre solution que de supprimer ce padding, et de mettre un margin aux élements contenu dans la DIV.

Existe-il une meilleur solution ?


Concernant les bordures d'une DIV :
Il semble que dans la majorité des cas, l'épaisseur des bordures se rajoutent à la largeur de la DIV.
Donc avec une largeur de 100px définie eet une bordure gauche de 1px, si on fait une capture et que l'on mesure la largeur, bordure comprise, on aura 101px. Excepté sous IE5.5 qui semble réduire la largeur de la div pour qu'en y ajoutant la bordure on obtienne bien 100px et non 101...

Si je pense avoir bien compris ce problème je n'ai trouvé aucune solution...

Merci à ceux qui répondront à ce message

@ +

Pour contourner le modèle de boîte erroné de Microsoft, il suffit de ne jamais mettre de bordure et/ou padding aux éléments auxquels on a appliqué un width.

<div id="boite">
	<p>Un paragraphe</p>
</div>

#boite {
	width: 100px;
}

#boite p {
	padding-left: 5px;
}

Dans le cas présent, tu auras toujours 100px de large avec un padding de 5px à l'intérieur de celui-ci.
Modifié par Stephan (29 Aug 2005 - 22:11)

Merci pour ta réponse, je suis bien content d'avoir apparemment compris tous ceci ! J'avoue avoir bien galéré à comprendre les problèmes !
Surtout que les tests avec IE < 6 n'ont été faits qu'une fois le codage terminé...donc pour trouver l'origine du problème...bonjour !

a écrit :
Sans hack ? Je ne pense pas.

Et tu sais où je pourrai trouver un modèle de hack pour corriger ceci ? (bien que ce ne soit pas dramatique)

Encore merci,
et en espérant qu'IE7 n'apporte pas trop de problèmes suplémentaires !

@ +

Graph-Site a écrit :

Et tu sais où je pourrai trouver un modèle de hack pour corriger ceci ? (bien que ce ne soit pas dramatique)

Le « Box Model Hack » est de loin le plus répandu pour faire du Bidouillage de Boites.

cool merci