Discussion :

[eddie5150]

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 :

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

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 :

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

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 :



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

[ornitho13]

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 :

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

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

++

[eddie5150]

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 ?

[ornitho13]

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

Code :

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

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 :

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

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

++

[eddie5150]

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