Discussion :

[Bisûnûrs]

Hello,

Au détour de mes petits tests, je suis tombé sur un bug particulièrement gênant sur IE7 (non testé sur IE6, mais je suppose que qui peut le plus peut le moins).

Ce bug apparaît lorsque deux fieldset se suivent dans le code source, et que l'on veut centrer horizontalement ces deux fieldset.

Par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
<fieldset>
  <legend>Fieldset 1</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
<fieldset>
  <legend>Fieldset 2</legend>
  <p>Plein de texte ici</p>
</fieldset>

Code :

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

1
2
3
4
5
6
fieldset {
    width : 800px;
    margin : 0 auto;
    background : yellow;
    padding : 0;
}

Donc à priori, comme un fieldset est un élément block, il devrait se centrer correctement. Or, si c'est le cas lorsqu'il n'y a qu'un seul fieldset, ce n'est plus vrai quand il y en a plusieurs : seul le dernier fieldset est centré, les autres sont tous décalés vers la droite.

Le bug peut être corrigé en spécifiant un display:block au fieldset.

Voir une page d'exemples

Ma question étant alors : Est-ce que quelqu'un a une idée de la raison de ce comportement ? Je n'ai personnellement pas trouvé la logique.
Donc si on renseigne un display:block au fieldset, cela veut dire que ce n'est pas son display par défaut sur IE, alors lequel est-il ?

[Macmillenium]

Salut Bisûnûrs,

Un peu bizarre comme problème ...

Je ne pense pas que ce soit un problème de display, fieldset est bien un élément de type block qui a toujours posé des problèmes sous IE

Un clear:both corrige aussi le bug :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<fieldset>
  <legend>Fieldset 1</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
<div style="clear:both;">Une div qui n'a aucune valeur sémantique mais fait l'affaire</div> 
 
<fieldset>
  <legend>Fieldset 2</legend>
  <p>Plein de texte ici</p>
</fieldset>

finalement ce n'est qu'un des nombreux bugs de ce navigateur

[Bisûnûrs]

@Macmillenium : C'est pour ça que j'avais bien dit dans mon premier message :

Ce bug apparaît lorsque deux fieldset se suivent dans le code source

En effet, pour corriger le problème même un simple br faisait l'affaire !

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<fieldset>
  <legend>Fieldset 1</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
<br />
 
<fieldset>
  <legend>Fieldset 2</legend>
  <p>Plein de texte ici</p>
</fieldset>

[Macmillenium]

En effet, pour corriger le problème même un simple br faisait l'affaire !

Tien, en gros il faut de quoi séparer les 2 fieldset quoi

[Bisûnûrs]

Tien, en gros il faut de quoi séparer les 2 fieldset quoi

Ou, comme ma première solution le suggère, rajouter un display:block sur les fieldset (chose pour le coup étonnante, vu qu'il est déjà censé être en display:block). Et ce n'est pas une histoire de contexte de formatage, avec un overflow:hidden ça ne fonctionne pas.

[Macmillenium]

Et ce n'est pas une histoire de contexte de formatage, avec un overflow:hidden ça ne fonctionne pas.

Non ce n'est pas un problème de contexte de formatage ni de haslayout d'ailleurs ...

[Erwan31]

Donc à priori, comme un fieldset est un élément block, il devrait se centrer correctement.

Hello Bisûnurs,
non ce n'est pas un élément de type block (au sens des specs HTML4) même si son rendu par défaut sur les navigateurs alternatif est de niveau block.

Les navigateur alternatif ont choisi un rendu de niveau block tandis qu'IE (qui peut pas faire comme tout le monde encore une fois) a ici choisi de lui attribuer un rendu de niveau inline-block d'où l'alignement des 2 fieldsets.

[Macmillenium]

Salut,

a ici choisi un rendu de niveau inline-block d'où l'alignement des 2 fieldsets.

Exact c'est le même comportement.
display:inline-block n'est pas interprété correctement par IE7- mais je pense qu'il s'agit bien d'un problème de haslayout ...

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
  <title>Fieldset block</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <style style="text/css">
  body {
  text-align:center;
  }
 
  fieldset {
    width:800px;
    margin:0 auto;
    background:yellow;
    padding:0;
    display:inline;
    height:1%;
  }
  </style>
</head>
<body>
 
 
<p>Sans display:block :</p>
 
<fieldset>
  <legend>Fieldset 1</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
<fieldset>
  <legend>Fieldset 2</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
 
<p>Avec display:block :</p>
 
<fieldset>
  <legend>Fieldset 3</legend>
  <p>Plein de texte ici</p>
</fieldset>
 
<fieldset>
  <legend>Fieldset 4</legend>
 
  <p>Plein de texte ici</p>
</fieldset>
 
 
</body>
</html>

Corrige le problème ...

[EDIT] : Finalement même un display:inline avec un text-align:center sur le body suffit
On dirait que les fieldset sous IE se comportent comme les éléments de type inline remplacé ...

[Bisûnûrs]

Les navigateur alternatif ont choisi un modèle de rendu de niveau block tandis qu'IE (qui peut pas faire comme tout le monde encore une fois)
a ici choisi un rendu de niveau inline-block d'où l'alignement des 2 fieldsets.

Effectivement, la largeur que j'avais mise à mes fieldset, étant élevée, m'empêchait de voir ce comportement.
Pourtant, avant de créer ce sujet je m'étais assuré de la valeur par défaut du display du fieldset sur IE et Firefox en Javascript (cf "Rendu par défaut des éléments HTML").

En tout cas, j'ai ma réponse, merci beaucoup.

On dirait que les fieldset sous IE se comportent comme les éléments de type inline remplacé ...

Bien vu ..

[Erwan31]

display:inline-block n'est pas interprété correctement par IE7- mais je pense qu'il s'agit bien d'un problème de haslayout ...

Arf tu l'aimes bien ce haslayout on dirait Tous les problèmes ne se réduisent pas au Haslayout même s'il permet (qu'il soit activé ou non) de résoudre de nombreux problèmes peu connus.
C'est plus simplement un problème de différence de display, le layout était déjà donné par le width:800px, pas besoin d'un height:1% supplémentaire donc.

On dirait que les fieldset sous IE se comportent comme les éléments de type inline remplacé ...

Oui ce qui est proche de l'inline-block finalement.

[Macmillenium]

Arf tu l'aimes bien ce haslayout on dirait

Oui vu qu'il présente presque 80% des problèmes de rendu sous IE

[Erwan31]

Pourtant, avant de créer ce sujet je m'étais assuré de la valeur par défaut du display du fieldset sur IE et Firefox en Javascript (cf "Rendu par défaut des éléments HTML").

Effectivement ce genre de subtilité n'a sans doute pas été programmée, j'en toucherai un mot à son auteur

[Bisûnûrs]

Merci !

[Erwan31]

Au passage et histoire d'éclairer un peu le propos, il est important à mon avis de préciser que les éléments n'ont pas vraiment de type en eux même mais qu'ils appartiennent à un modèle de contenu (%inline, %block, %list, %flow...) qui n'est pas forcément identique au rendu par défaut que le navigateur lui attribue et qui défini les imbrication possibles (inline ou block généralement).

Dire qu'un élément est de type block revient en général à dire qu'il est de rendu block (grâce au display block par défaut du navigateur) et non qu'il appartient au groupe %block.

Un exemple: le paragraphe ici: http://www.la-grange.net/w3c/html4.0...xt.html#edef-P
Comme vous voyez l'élément p a un modèle de contenu %inline mais son rendu est de type block.

Il y a d'autre notions qui rentrent en jeux mais après ça devient un peu confusant et par forcément hyper utile AMHA.