[résolu] Nouveaux problèmes de padding entre IE7 et firefox

Bonjour à tous,
en train de remettre quelques uns de mes "vieux" sites aux normes, je viens de tomber sur un nouveau problème avec l'appartition de IE7
le bout de css qui flanche...

#conteneur {
/*je ne mets que ce qui déc...*/
width: 730px;
padding: 10px;
}

autrefois, sous IE6 comme firefox on obtenait avec un

<div id="conteneur">

un conteneur de 750px de large avec une marge intérieure de 10px. Maitenant, sous IE7 on obtiens un conteneur de 730 pixels de large et sous firefox un conteneur de 750... Alors qu'avec une table à laquelle on applique le même style mais

#conteneur {
width: 750px;
}
#conteneur td {
padding: 10px;
}

on obtient sous IE7 et Firefox un conteneur de 750px avec une marge interne de 10px. Même chose pour les bordures qui normalement s'ajoutent à la largeur, plus sous IE7.
Franchement, tout ça n'incite pas à devenir ayatollah des css. Alors, je sais que c'est IE qui ne respecte pas la norme des marges internes qui s'ajoutent à la largeur mais faisant des sites tous publics les stats montrent encore 80% au moins d'IE chez les visiteurs... Ca me signifie même tout simplement que les derniers sites que j'ai faits et voulus quasi "strict" en xhtml ne sont plus compatibles !
voilou, j'avais besoin de râler un petit coup
@ +
Modifié par virtualgadjo (28 Dec 2006 - 13:53)

je comprends pas normalement ie6 doit aussi faire une div de 730px...

le calcul des divs de ie ne respecte pas les standards et c'est un gros prôblème. Mais tu peux arranger ça en mettant 2 divs. la premiere fait 750px la deuxieme à un margin de 10px...

et voilà ça marche aussi bien que ton tableau

Bonjour virtualgadjo et bienvenue sur Alsacréations,

Pourrais-tu s'il te plait mettre en forme ton message en utilisant les balises [code ] [/code ] (sans espace) pour afficher le code (un bouton est prévu pour cela). Merci d'avance.
Cela fait partie des quelques règles qu'on demande de suivre sur ce forum.

Concernant ton problème, il ne devrait pas y avoir de différence si le document est interprété en mode standard (avec un doctype valide et sans rien avant, à part éventuellement un prologue XML pour IE7 (mais non pour IE6)). Apparement ce n'est pas le cas. Si tu donnes un lien ou le début du code, nous pourrons te dire pourquoi.

salut,
non non, ie6 avait un problème de fusion des marges mais pas avec les padding internes, un div de 730 de large avec un padding de 10 affichait bien une largeur de 750.

Je suis bien d'accord avec ce système de div imbriqués (ce que je fais) même si ça me rappelle tristement le truc des deux tables l'une dans l'autre avec un cellpadding de 1px qu'on utilisait partout au début du web un peu graphique pour faire une bordure de 1 pixel propre mais franchement, est-ce que c'est subitement mieux avec deux div parce que ce sont des div alors que ça marche aujourd'hui avec une seule table

En bon apprenti ayatollah depuis les prémices du web graphique, (ça remonte...) je passe aussi mes jours et mes nuits à trouver des hacks pour obtenir un affichage cohérent un peu partout en essayant d'utiliser les standards mais je finis toujours par buter sur un truc énervant : ce qu'on passe son temps à essayer de hacker pour supprimer autant que possible les tables du code pour la mise en page change tout le temps alors que les tables marchent toujours aussi bien et même de mieux en mieux à coup de css (on arrive avec une seule table à faire ce qu'on faisait autrefois avec cinq imbriquées et donc avec un code ultra léger et surtout, UUUUltra compatible).
Ca m'ennuie autant que toi mais essaye de hacker propre, court et pérenne un vertical-align dans des div pour une photothèque là où ça marche en une ligne avec un td.
Sans parler des div qui suivent le contenu quelqu'il soit sous IE, pas sous firefox ou les div ne s'étendent en hauteur que si le contenu finit par du texte, de l'image (ah bravo le gif transparent de fin de contenu pour que le div suive qu'on trouve partout... ) ou... une table. Et j'en passe (la misère des hacks pour les formulaires qui ne marchent jamais avec les zones de textes, d'ailleurs, jette un oeil au source de cette page, enfin je parle de celle du formulaire de post mais c'est la même pour les autres, sur ce forum dédié aux css et que vois-tu ? des tables, parce que ça marche, que c'est solide, sûr et portable tous navigateurs confondus, énervant hein ? je suis d'accord), et crois-moi, j'y travaille, j'adore faire des acrobaties en css, mais il y a un moment, l'envie de râler me prend, c'est aujourd'hui, sorry
@+
Modifié par virtualgadjo (28 Dec 2006 - 12:00)

ah sorry, je viens de voir ton message au sujet de la mise en forme, je vais essayer de corriger ça de ce pas, merci
C'est fait, ah yes, c'est beaucoup plus beau en plus, merci encore, je sens que je vais me plaire ici à râler sur mes css adorées
Modifié par virtualgadjo (28 Dec 2006 - 12:04)

Merci pour le code.

Concernant IE7, il n'a y normalement pas de problème, si rien ne le fait basculer en mode quirks (et donc dans l'ancien modèle de boite, comme IE 5.x) il donnera bien 750px (730 de largeur + 20 de padding), tout comme Firefox.
Si ce n'est pas le cas, donne un lien vers un exemple en ligne et nous verrons pourquoi.

Alan a écrit :
Concernant IE7, il n'a y normalement pas de problème, si rien ne le fait basculer en mode quirks (et donc dans l'ancien modèle de boite, comme IE 5.x) il donnera bien 750px (730 de largeur + 20 de padding), tout comme Firefox.
Si ce n'est pas le cas, donne un lien vers un exemple en ligne et nous verrons pourquoi.

+1

IE6 et IE7 gèrent parfaitement le modèle de boîte CSS, faut arrêter de prétendre que « IE ne gère pas les padding comme les autres navigateurs » : c'est tout simplement faux.

Le tout, c'est de s'assurer que la page sera interprétée en mode Standard et pas en mode Quirks.

Re,
merci de vos réponses, j'ai résolu mon problème à coup d'en-tête (dont firefox n'a pas besoin pour afficher le style normalement, allez savoir pourquoi...)
Juste une petite précision, je ne suis pas anti-IE du tout, mais alors pas du tout, perso, je regrette même parfois que les standards du web ne s'inspirent pas de la façon beaucoup plus logique à mes yeux dont il gère certains points de détails et ne lui piquent pas certains styles persos, pas très importants mais mimis comme tout façon les scrollbars. Et je disais moi-même plus haut que IE ne gérait pas les fusions de margins comme "tout le monde" et pas les paddings, ce n'est pas de moi, c'est notoire.
En revanche, je persiste et signe à propos des hacks en tous genres qui ne font qu'essayer de reproduire maladroitement avec des div des trucs tellement simples et solides avec des tables. Je râle mais je le fais aussi... enfin, tant qu'il ne faut pas un Mo de css pour remplacer une ligne avec une table ! Faut dire, mon truc, c'est php/MySql à la base et, ça a l'air d'être unanimement partagé par les développeurs de grosses applis, il y a un moment, stop à la prise de choux, retour au transitional et aux tables, voir les gros forums par ex (celui-ci en est un exemple frappant, on y cause css sur fond de table pas vraiment tabulaires )
Voilou, je m'en vais mettre résolu plus haut et tâcherai de passer donner un coup de main quand j'y pense parce qu'à force de faire des acrobaties visuelles, on finit par résoudre bien des problèmes.
Voilou, @ sous peu et merci encore

virtualgadjo a écrit :
merci de vos réponses, j'ai résolu mon problème à coup d'en-tête (dont firefox n'a pas besoin pour afficher le style normalement, allez savoir pourquoi...)

D'en-tête ? Tu parles du Doctype ?
Pour mémoire : A propos du Modèle de boîte Microsoft (ou "quirks")

virtualgadjo a écrit :
Juste une petite précision, je ne suis pas anti-IE du tout, mais alors pas du tout, perso, je regrette même parfois que les standards du web ne s'inspirent pas de la façon beaucoup plus logique à mes yeux dont il gère certains points de détails et ne lui piquent pas certains styles persos, pas très importants mais mimis comme tout façon les scrollbars.

Pour les barres de défilement (c'est quoi une scrollbar ? ), tu penses à la gestion des couleurs des divers éléments via des propriétés CSS propriétaires ? Disons qu'il y aurait des arguments pour (plus grande liberté graphique) et des arguments contre (perte d'ergonomie, difficulté à obtenir une gestion uniforme quels que soient les systèmes d'exploitations et les navigateurs).

virtualgadjo a écrit :
Et je disais moi-même plus haut que IE ne gérait pas les fusions de margins comme "tout le monde" et pas les paddings, ce n'est pas de moi, c'est notoire.

Il me semble qu'Internet Explorer gère correctement la fusion des marges, sauf dans les cas des éléments dotés de layout (cf. notion de HasLayout).

virtualgadjo a écrit :
En revanche, je persiste et signe à propos des hacks en tous genres qui ne font qu'essayer de reproduire maladroitement avec des div des trucs tellement simples et solides avec des tables.

Tout à fait d'accord. Il faudrait laisser de côté le rejet « idéologique » des tableaux, et penser un peu plus en termes pratiques. Quels seront les impacts d'une solution avec un tableau en termes de compatibilité, d'accessibilité, de maintenance du code... et quels seront les impacts d'une solution plus bricolée mais sans tableaux ?
L'avantage est, à mon sens, rarement aux tableaux. Mais il y a des cas où leur utilisation est tout à fait justifiée. De plus, on peut rappeler que les tableaux ne sont pas intrinsèquement inaccessibles. Seule leur mauvaise utilisation (et en particulier l'imbrication des tableaux les uns dans les autres) pose problème.

Re salut mpop
oui, il s'agit bien du doctype, je suis en train de retaper complètement un site basé sur des pages écrites en 2000 et truffées de tables et, dans la manoeuvre, j'ai complètement oublié d'ajouter le doctype transitionnal qui va bien, mea culpa.

Sorry pour les scrollbars mais vois-tu, à moitié rosbif, je mélange allègrement les deux dès que l'un fait plus court que l'autre (la même que pour le code ).
J'aime bien les styles persos de IE mais, au fond, suis plutôt d'accord avec toi, c'est déjà assez compliqué comme ça de faire compatible avec les choses essentielles alors là... enfin, dans un div avec overflow sur scroll, ça fait quand même joli

Pour les margins de IE, le blog est truffé de commentaires sur les margins haute et basse et leur fusion, rien de dramatique, tout à 0 et on joue avec les paddings mais, le problème existe bel et bien, ça fait juste qu'on a un truc passablement inutile, puisqu'ingérable, pour presque tous les éléments de mise en page, les marges externes.

100 % d'accord pour les tableaux, point trop n'en faut mais parfois ils conservent des propriétés comme le vertical-align et une solidité que les div doivent leur envier...

Bon, voilà que je trouve un forum où enfin l'on cause d'un truc qui m'amuse, je sens qu'il faut que je me tienne à distance pour ne pas y passer ma vie
@ sous peu