Discussion :

[dream_of_australia]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!--[if IE]>
.montage {
	position:relative;
	padding-top:20px;
	padding-bottom:15px;
	margin-bottom:15px;
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	font-size:12px;
	color:#666666;
	border-style:solid;
	border-width:thin;
	border-color:#666666;
	background-color:#CCCCFF;
	width:500px;
}
legend {
  position:absolute;
  top:-10px; 
  left:10px;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#666666;
}
<![endif]-->

Quelqu'un aurait-il une idée ?? Merci d'avance !

[blueice]

Il faudrait nous en dire plus, là comme ça, sans le code....

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

[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.

[dream_of_australia]

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.

[blueice]

Essaye un

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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...

[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 ?

[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

[Strix]

Peut-on voir ta page en ligne ? ou mets ta page en pièce jointe (avec le css)
Merci

[Candygirl]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#formdiv {
  width:100%;
}

voir si cela résoud ton problème. Ou encore, de manière plus générale:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

* {zoom:1;}