Comportement étrange fieldset sous Chrome/Safari

Bonjour,

j'ai un petit souci avec l'affichage d'un fieldset sous Chrome et Safari, que je ne retrouve pas dans Firefox, Opera et IE.

Tout d'abord, voici le code :

Code:

---

1 2 3 4 5

<fieldset class="left"><legend>Myfield</legend> <p class="left"><label for="prix1">Prix du pack</label><input type="text" id="prix1" name="prix1" /></p> <p class="left"><label for="prixtick1">Prix du ticket</label><input type="text" id="prixtick1" name="prixtick1" /></p> </fieldset>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

form p { float: left; overflow: auto; margin-bottom: 1.3em; width: 150px; } form fieldset { float: left; padding: 5px 10px; margin-bottom: 10px; }

---

Sous Firefox (à gauche sur l'image), mes deux p sont bien flottants, alors que sous Chrome/Safari (à droite), ils sont l'un en dessous de l'autre :

http://img440.imageshack.us/img440/6...nstitre1uc.png

Pourtant, si j'ouvre l'inspecteur d'éléments de Chrome, que je décoche dans le CSS la propriété "float: left" du fieldset, et que je la coche de nouveau, j'obtiens bien le même résultat que sous Firefox, les deux p cote à cote. Le comportement est identique sous Safari.

Y'a-t-il un illogisme dans mon code ou est-ce bien un problème d'affichage de Chrome/Safari ?

Merci d'avance

Salut,

je viens d'essayer ton code ( en rajoutant <form> autour du fieldset) et j'ai juste ajouter de la largeur à la classe suivante:

Code:

---

1 2 3 4 5 6 7

form p { float: left; overflow: auto; margin-bottom: 1.3em; width: 200px; // au lieu de 150px }

---

et cela fonctionne parfaitement sur chrome et safari. Sans faire ce changement cela fonctionnait également mais on ne voyait pas tous le formulaire.

Ton problème se situerait en amont de ce code. Pourrais tu en montrer un peu plus? merci

++

Salut, merci de ta réponse. Voici une page de test où se produit ce petit souci : http://www.dreamsportickets.com/test.php

En mettant une largeur fixe au fieldset, ca résout le problème sous Chrome et Safari, mais j'aimerais savoir quelles est la cause de ce problème, c'est peut-etre simplement un bug de ces navigateurs ?

le bug se situe au niveau de l'instruction CSS suivante

Code:

---

1 2 3 4 5 6

form p{ float: left; overflow: auto; margin-bottom: 1.3em; width: 225px; }

---

Enlève la largeur et tu verras que cela fonctionne sous safari et chrome.
rajout un padding à la place

par exemple

Code:

---

1 2 3 4 5 6

form p{ float: left; overflow: auto; margin-bottom: 1.3em; padding-left:10px; }

---

Dis moi si c'est bon

++

Ha oui ca marche comme ca également, merci ! Bizarre tout de même.