Problème de floats dans le fieldset d'un formulaire (Firefox)

Bonjour,

J'ai un formulaire divisé en plusieurs <fieldset>, dont les lignes sont divisées en 2, le label à gauche et le champ à droite. Pour placer labels et champs, j'utilise float:left et float:right. Puis clear:both pour réaligner la ligne suivante.

Sous Internet Explorer, ça fonctionne bien, mais pas (bien) sous Firefox. Donc j'ai fait des tests.

1- D'abord un formulaire sans fieldset. Chaque ligne (label et champ) est incluse dans un <div class="form-ligne">, dont le style contient une règle "clear:both" pour réaligner correctement la ligne suivante. Tout va bien (voir http://www.ediweb.org/tests/form_test01.html ).

2- Maintenant on rajoute des fieldsets. Sous Firefox les labels ne tombent pas en face des champs, alors que sous Internet Explorer, ça fonctionne sans problème (voir http://www.ediweb.org/tests/form_test02.html ).

3- J'ai utilisé un <div class="separateur"> placé à la suite des labels et champs, et dont le style contient une règle "clear:both" pour réaligner correctement la ligne suivante. Et supprimé cette même règle du style "form-ligne". Chaque <div class="separateur"> contient un simple espace. Comme on pouvait s'y attendre, on obtient le même résultat que précédemment (voir http://www.ediweb.org/tests/form_test03.html ).

4- J'ai remplacé l'espace du premier <div class="separateur"> de chaque fieldset par un espace insécable ("&nbsp;"). Sous Firefox, Les labels et champs du premier fieldset sont bien alignés, mais pas ceux du second. Sous Internet Explorer, ça rajoute un espace vertical supplémentaire (voir http://www.ediweb.org/tests/form_test04.html ).

5- Comme le problème semble venir de la première ligne du fieldset, j'ai rajouté une ligne contenant un label et un champ vides en début de chaque fieldset. Ca fonctionne bien sous Firefox, mais du coup sous Internet Explorer, c'est la cata (voir http://www.ediweb.org/tests/form_test05.html ).

6- Finalement comme (dans ce cas), les fieldsets ne servent que pour la déco, je les remplacés par des faux fieldsets et des faux legend. Ca fonctionne bien sous les 2 navigateurs, mais il m'a fallu rajouter un espace supplémentaire en fin de fieldset sous Firefox (voir http://www.ediweb.org/tests/form_test06.html ).

Voilà. Si vous avez une autre solution plus "élégante", elle sera la bienvenue. Et surtout si vous avez une explication à ce mystère, je dormirais mieux...
Modifié par marabbeh (09 Aug 2006 - 11:58)

Bonjour,

Une régression a en effet provoqué l'apparition de ce bug CSS dans Firefox1.5: la propriété clear n'est plus supportée dans les blocs fieldset.

Selon les cas, les mises en pages sont adaptées:
- en évitant le recours aux flottants et en revenant à une présentation via un tableau
- en conservant les flottants, mais en jouant sur la largeur des éléments flottants ou en flux pour remplacer la propriété clear

Laurent Denis a écrit :

Une régression a en effet provoqué l'apparition de ce bug CSS dans Firefox1.5: la propriété clear n'est plus supportée dans les blocs fieldset.

Etrange, car j'utilise actuellement des fieldset avec ce code

<fieldset><legend>Paramétre</legend>
	<label>Titre :</label><input type="text" name="titre"/>
	<label>Login :</label><input type="text" name="login"/>
	<label>Password :</label><input type="text" name="password"/>
</fieldset>

Et en css:
 fieldset label {clear: both; float: left}
 fieldset input {float: left}

Et le clear:both marche bien sous Firefox 1.5
Par contre, pour aligner correctement label et input, je rajoute

fieldset label {line-height: 20px;}
fieldset input {height: 18px; border: solid 1px}

C'est pas correct alors?

EDIT: youps, petit oubli, je rajoute une largeur au label pour que tous s'aligne verticalement
Modifié par coccimaster (09 Aug 2006 - 12:31)