28218 sujets

CSS et mise en forme, CSS3

Pb avec le background d'un fieldset et le legend

Voilà mon code xhtml :

<form ...>
<fieldset>
<legend>Options</legend>
<label for="nom">Nom <input type="text" name="nom" id="nom" /></label>
</fieldset>
</form>

Ma css :

fieldset { background:#500; border:1px solid #f7df7b;}
legend { background:#400; border:1px solid #f7df7b; }

Le problème :

Sous Firefox pas de soucis, mais sous IE, le "fond" du fieldset dépasse au dela de son border en haut. En fait c'est "sous" le legend que le fond continue :(

Quelqu'un aurait une solution à mon soucis ?
Salut,

Ca n'a peut-être aucun rapport avec l'erreur, mais ton code me semble étrange : le champ input ne devrait logiquement pas être incluse dans le label Smiley hum
Salut,

En réponse à Marvin, le champs input peut être inclus (ou pas) dans un label ceci n'a guère d'importance pour le W3C : http://www.openweb.eu.org/articles/formulaire_accessible/

Pour ce qui est de ton problème, il semble que mozilla et IE gèrent le <fieldset> différement. Personnellement pour résoudre ce problème je tenterais de jouer avec l'attribut : "position" (absolute) des balises <fieldset> et <legend> afin de "séparer" ces 2 "blocs".
Tiens moi au courant.

>Le problème :

>Sous Firefox pas de soucis, mais sous IE, le "fond" du fieldset >dépasse au dela de son border en haut. En fait c'est "sous" le >legend que le fond continue :(
Modifié le 26 Oct 2004 - 07:52
guillaume a écrit :
Salut,

En réponse à Marvin, le champs input peut être inclus (ou pas) dans un label ceci n'a guère d'importance pour le W3C : http://www.openweb.eu.org/articles/formulaire_accessible/


Ah... Peut-être faudrait-il actualiser l'article d'OpeWeb (je tâcher de voir ça rapidement).

Il y a deux type de labels:
- les labels explicites du type <label for="...>Prénom</label>: <input id="... /> (l'input est extérieur au label, le for= fait le lien).
- les labels implicites du type <label>Prénom<input iype=text></label>: l'input est inclus dans le label, qui ne doit pas avoir de for=

Mais seuls les labels explicites sont actuellement correctement supportés par les lecteurs d'écrans, et en particulier Jaws.

Voir à ce sujet http://www.blog-and-blues.com/2004/mai/01/Jaws_label_titres_liens_et_CSS_en_general.asp

Au fait, tant qu'on y est: si vous avez des labels pour les lecteurs d'écran etc., mais que vous ne voulez pas les faire apparaître dans le rendu graphique, la solution la plus recommandable actuellement est de remplacer le <label> par l'attribut title du champ de formulaire, sous la forme <input title="prénom"... />
Modifié le 26 Oct 2004 - 08:31
Ok sympa comme bug,

Il doit suffir à présent de jouer sur l'attribut border (0).

>Si je met le legend en dehors du fieldset, alors le border du fieldset >est "coupé" là ou devrait normalement être le legend.
Modifié le 26 Oct 2004 - 09:16
Hello,

J'ai été confronté à ca problème, et je viens de trouver un solution qui a l'air de bien marcher : http://jeffcroft.com/blog/archives/2004/10/styling_fieldset_and_legend.php

Pas top sous opera, mais impeccable sous ie et firefox.

J'ai par contre changé chez moi :


*>form#KSU_makeTemplates legend {
/* Since Gecko ignores the rule above, we'll push it up with margin-bottom */
margin-bottom: 1em;

en

*>form#KSU_makeTemplates legend {
/* Since Gecko ignores the rule above, we'll push it up with margin-bottom */
margin-bottom: 0 ;

pour que ce ne soit pas décalé sous firefox...

Ouala ouala...

PS:qui a dis un poil en retard, la réponse ? :
Sujet clos
Aller à