Légende de Fieldset qui ne s'affiche pas sous IE

Version imprimable

Coucou tout le monde,

Après avoir découvert que les fieldset avec une couleur de fond étaient horribles à voir sous IE, j'ai tenté de corriger le problème à partir d'infos trouvées sur le net.
Maintenant la couleur de fond est bien confinée à l'intérieur du fieldset, mais le texte de la légende ne s'affiche plus !! Si j'enlève le style css pour ie de la légende, le texte s'affiche mais je retrouve mon problème de couleur de fond.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 
Quelqu'un aurait-il une idée ?? Merci d'avance !

23/07/2007, 14h23
blueice

Il faudrait nous en dire plus, là comme ça, sans le code.... :roll:
23/07/2007, 16h25
dream_of_australia
Ce qu'il y a dans les legend et les fieldset est inséré dynamiquement par php à l'aide d'ajax.
Je ne pense pas que le code complet aiderait à la compréhension, ici un bout de code :
Code:

1 2 3 4 5 6 <fieldset class="montage" width="600"> <legend> <b>Détails du produit</b> </legend> ... champs du formulaire ... </fieldset>
Mon souci, c'est que la légende existe bien et elle apparaît bien sous Firefox. Mais sous IE, j'ai le choix entre :
_une légende qui s'affiche mais la couleur de fond qui déborde du fieldset (lorsque je ne définis pas legend dans le fichier css)
_ une légende qui ne s'affiche pas mais la couleur de fond qui ne déborde pas (lorsque je définis legend dans le fichier css comme vu dans le code donné dans mon premier post)
23/07/2007, 16h37
blueice

Il faut donner uniquement le code HTML généré, pas de PHP...
Et une petite capture d'écran aurait également aider.
Plus tu donnes de détails et plus vite tu auras ta réponse. ;)
23/07/2007, 17h09
dream_of_australia

2 pièce(s) jointe(s)

Code corrigé dans le deuxième post, j'ai mis le code généré. Et voilà 2 captures d'écran pour illustrer les deux cas de figure que je rencontre.

Essaye un

Code:

1
2
3
 
fieldset{ position: relative; margin-top:1em; padding-top:.75em; }
legend{ position:absolute; top: -.5em; left: .5em; }

23/07/2007, 17h49
dream_of_australia

Je te remercie mais j'avais déjà essayé ces valeurs (trouvées sur un site internet expliquant le problème de fieldset et background-color) et elles ne fonctionnent pas...
25/07/2007, 08h46
Strix

Salut

Quand je recopie le code (CSS et HTML) sans la condition, je n'ai aucun soucis hormis que sur IE (6 & 7) la légende est placée à peine plus haut que sur FF.
J'ai loupé un truc ?
25/07/2007, 11h17
dream_of_australia

Merci Strix de ta contribution. Si ce bout de code marche, je ne vois pas pourquoi il ne marcherait pas dans ma page.
Est-ce que le problème pourrait venir du style d'un autre élément de ma page, comme un parent ?

Mes parents :
le body avec margin:0
le div contenant le formulaire (au départ vide, c'est un appel ajax qui le remplit)
<div id='formdiv'></div> sans aucun style
25/07/2007, 11h25
Strix

Peut-on voir ta page en ligne ? ou mets ta page en pièce jointe (avec le css)
Merci ;)
25/07/2007, 16h43
Candygirl
Citation:

Envoyé par dream_of_australia

Est-ce que le problème pourrait venir du style d'un autre élément de ma page, comme un parent ?

Mes parents :
<div id='formdiv'></div> sans aucun style

Oui, je n'ai rien suivi ni testé les codes proposés, mais un problème de non apparition d'un élément sur IE peut très bien être lié au problème d'un parent non doté de layout. Dans ton cs, visiblement c'est le cas de #formdiv. Tu peux donc tester d'ajouter:
Code:

1 2 3 #formdiv { width:100%; }
voir si cela résoud ton problème. Ou encore, de manière plus générale:

Code:

* {zoom:1;}