28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je m'en remet à vous car j'ai actuellement un problème suis IE 7 et IE8 en version compatibilité.
Dans le calculateur simple de mon site (http://www.tpnh.eu/calculateur-200.html), les fieldsets ne sont pas centrés. Voir même très décalés par rapport au dernier quand je met une largeur plus petite.

Ce problème survient en 1280 et 1024, j'ai pas pu essayer d'autres résolutions, je n'en ai pas...
Sous Firefox, IE8, Opera, safari,... ça marche super mais pas sous IE7 évidemment...

Savez-vous comment faire pour régler ce problème ?

Merci d'avance.

Gp2mv3

P.S.: Pour limiter le problème, j'ai mis une largeur de 98% à tous les fieldset mais on voit quand même le décalage quand on compare avec le derniers fieldset.
Gp2mv3 a écrit :
Ce problème survient en 1280 et 1024, j'ai pas pu essayer d'autres résolutions, je n'en ai pas...

Tu redimensionnes la fenêtre du navigateur et paf, magie, tu as des résolutions supplémentaires. Smiley cligne

Gp2mv3 a écrit :
Savez-vous comment faire pour régler ce problème ?

Non, pas vraiment. Il pourrait s'agir d'une incapacité d'IE 6-7 à centrer l'élément FIELDSET via les marges automatiques. Ceci dit, si ton but est d'avoir un petit retrait à gauche comme à droite de chaque cadre bleu, tu n'as pas besoin d'un centrage avec les marges automatiques, tu as juste besoin de marges à gauche et à droite.

Gp2mv3 a écrit :
Pour limiter le problème, j'ai mis une largeur de 98% à tous les fieldset mais on voit quand même le décalage quand on compare avec le derniers fieldset.

Le dernier FIELDSET? Celui qui a pour LEGEND «Chauffage et habitation»? Je n'ai pas IE 6 ou 7 sous la main pour tester, mais je vois mal pourquoi il ne serait pas aligné comme les autres (qu'il soit centré ou non).

Sinon, sur le fond ton usage des FIELDSET me semble un peu excessif. Un FIELDSET, cela sert essentiellement à faire qu'un lecteur d'écran répète l'intitulé de l'élément LEGEND correspondant à chaque fois qu'il lira un champ. Par exemple, en partant du principe que «Personnes vivant chez vous» est un label correctement associé au champ INPUT qu'il décrit (ce qui n'est pas le cas ici...), un lecteur d'écran lira «Nombre d'habitants Personnes vivant chez vous». C'est assez redondant comme information.

Là où tu aurais normalement besoin de l'élément FIELDSET, ce serait plutôt pour les séries de boutons radio ou checkbox. Chaque bouton a un label associé explicitement (via les attributs id et for), et le tout est contenu dans un FIELDSET avec un LEGEND qui décrit la signification du choix. Ainsi, «Type de l'habitation» et «Age de l'habitation» devraient être des LEGEND (chacun dans un FIELDSET englobant les choix correspondants), tandis que «Nombre d'habitants» et «Type de batiment» pourraient simplement être des titres (en l'occurrence des H2).
Voilà, j'ai fait un screen pour que vous voyez mieux le problème...
Pour les fieldsets, je savais pas, je vais modifier ça alors.

upload/21674-ie7.jpg

Voilà, je pense que c'est plus simple à comprendre comme bug.
Si vous voulez je peux même enlever le width: 98% pour bien voir la différence...
Tu as lu le sujet indiqué par Agylus? Le problème décrit n'est pas exactement le même, mais si les FIELDSET ont un rendu par défaut en inline-block dans IE 7 ça peut éventuellement expliquer ton problème également. Tu as testé avec un display:block?
C'est effectivement ça le problème.
Il est réglé sur ma version locale. JE vais bientôt le mettre en ligne.