fieldset et CSS : background-color

[K-ZimiR]

Bonjour à tous.

Je suis en train de réaliser un formulaire et j'utilise pour ce faire les fieldset.

Je style mon fieldset de la façon suivante :

form fieldset {
 	 padding: 1em;
	background: #eef;
	border: 1px solid #4475ce;
	margin: 0 0 15px 15px;
	width: 450px;
	display: block;
  }
  
  form fieldset legend {
 	 padding: 4px;
	border: 1px solid #4475ce;
	background:#4475ce;
	color: #fff;
	margin-bottom: 10px;
  }
  
  form label {
 	 display:inline;
	width: 120px;
	float:left;
	margin: 3px 0 3px 0;
  }

Le rendu sous Firefox est impec, mais sous internet explorer j'obtiens un laid dépassement de la couleur de fond :

Quelqu'un connait-il une solution ?

Merci.

[K-ZimiR]

Bon, malheureusement je n'ai pas trouvé d'autre solution que de ne pas utiliser la balise <legend> dans le <fieldset>

[Monique]

Bonjour,

C'est malheureusement une des mauvaises interprétations de IE

Et je n'ai pas encore trouvé de solution satisfaisante.

Attention, si tu n'utilises pas l'émément legende, ta page y perd en accessibilité

[K-ZimiR]

Attention, si tu n'utilises pas l'émément legende, ta page y perd en accessibilité

<{POST_SNAPBACK}>

J'en ai bien conscience, mais ma direction ne tolérera pas que je mette des formulaires en ligne avec des aplats de couleurs qui dépassent !! c'est un coup à me faire flageller sur la place publique

Je dois malheureusement faire un compromis.

[Monique]

Je viens de trouver une proposition de solution sur la liste des Pompeurs (le 30/12/2003 par NeoKoD) :

En descendant pour IE le top du fieldset d'1em en position relative et

en relevant le top de la legende d'1em en relative :

fieldset {
     position :              relative;
     top :                   1em;
     padding :               0 0.5em 1em 0.5em;
     background-color :      #CCC;
 }
html>body fieldset {
     padding-top :           1em;
     top :                   0;
 }
legend {
     position :              relative;
     top :                   -1em;
     padding :               0.4em;
 }

Je n'ai pas testé

[K-ZimiR]

hé bien merci beaucoup Monique et merci à liste des Pompeurs

Je confirme que cette solution FONCTIONNE !!

[edit] pour cause d'ortograffe

Modifié 3 Janvier 2005 par K-ZimiR