Discussion :

[jlb59]

Bonjour à tous,

J'ai un site http://qi98.free.fr/ dans lequel j'ai mis des "Fieldset".

Le problème est que sous FF y a pas de problèmes.

Par contre, avec IE, là il y a une sacrée différence.


Je voudrais savoir s'il y avait un moyen pour que ça soit presque pareil chez FF et IE.

Merci d'avance.

[Erwan31]

Bonjour,
avant de résoudre ce type de problème, tu devrais rendre ta structure plus pertinente. Les éléments HTML ne devraient pas être utilisés uniquement à des fins de présentation.
Le titre "Création du logiciel" devrait être un H1 (voire un H2) et non un legend dans un fieldset dont le choix n'est pas approprié ici.
Il faut te débrouiller pour obtenir le même résultat avec cette structure:

Code :

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

1
2
3
4
 
<div>
     <h1>Création du logiciel</h1>
</div>

[jlb59]

Bonsoir Erwan31,

C'est bien ce que tu dit, mais alors, à quel moment faut-il utilise Fieldset et Legend ?

J'ai un livre qui a mis un exemple pour un formulaire !!!

Si j'ai fait ça, c'est pour faire un encadré parce qu'avant j'utilisais

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
54
55
56
57
58
59
60
<style type="text/css">
/*//////////////// ENCADREMENT //////////////////*/
.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#fff; border-left:1px solid #000; 
border-right:1px solid #000; border-top:1px solid #000;}
.square .b2 {display:block; height:1px; margin:0; background:#fff; border-left:7px solid #000; border-right:7px solid #000; 
overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#fff; border-left:1px solid #000; 
border-right:1px solid #000; border-bottom:1px solid #000;}
.square .boxcontent {display:block; background:#fff; border-left:1px solid #000; border-right:1px solid #000;padding-left:10px;padding-right:10px;}
.square {background: transparent; width:98%; margin-left:10px;} /* Width=largeur de la boîte */
.square h1, .square p {margin:5px 5px 0px 10px;}
.square h1 {color:#000; letter-spacing:0px;}
.square .titre{background:#778899;font-family:verdana,tahoma,arial,sans-serif;font-size:18px;color:#fff;margin:0px 0px 0px 0px}
.square p {margin-bottom:0px;line-height:15px;}
 
/*//////////////// ENCADREMENT //////////////////*/
.square2 .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square2 .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#BA55D3; border-left:1px solid #FF0; 
border-right:1px solid #FF0; border-top:1px solid #FF0;}
.square2 .b2 {display:block; height:1px; margin:0; background:#BA55D3; border-left:7px solid #FF0; border-right:7px solid #FF0; 
overflow:hidden;}
.square2 .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#BA55D3; border-left:1px solid #FF0; 
border-right:1px solid #FF0; border-bottom:1px solid #FF0;}
.square2 .boxcontent {display:block; background:#BA55D3; border-left:1px solid #FF0; border-right:1px solid #FF0;padding-left:10px;padding-right:10px;}
.square2 {background: transparent; width:40%; margin-left:10px;} /* Width=largeur de la boîte */
.square2 h1, .square p {margin:5px 5px 0px 10px;}
.square2 h1 {color:#000; letter-spacing:0px;}
.square2 .titre{background:#BA55D3;font-family:verdana,tahoma,arial,sans-serif;font-size:18px;color:#fff;margin:0px 0px 0px 0px}
.square2 p {margin-bottom:0px;line-height:15px;}
 
/*//////////////// ENCADREMENT //////////////////*/
.square3 .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square3 .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#F5F5F5; border-left:1px solid #00c; 
border-right:1px solid #00c; border-top:1px solid #00c;}
.square3 .b2 {display:block; height:1px; margin:0; background:#F5F5F5; border-left:7px solid #00c; border-right:7px solid #00c; 
overflow:hidden;}
.square3 .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#F5F5F5; border-left:1px solid #00c; 
border-right:1px solid #00c; border-bottom:1px solid #00c;}
.square3 .boxcontent {display:block; background:#F5F5F5; border-left:1px solid #00c; border-right:1px solid #00c;padding-left:10px;padding-right:10px;}
.square3 {background: transparent; width:20%; margin-left:10px;} /* Width=largeur de la boîte */
.square3 h1, .square p {margin:5px 5px 0px 10px;}
.square3 h1 {color:#000; letter-spacing:0px;}
.square3 .titre{background:#F5F5F5;font-family:verdana,tahoma,arial,sans-serif;font-size:18px;color:#fff;margin:0px 0px 0px 0px}
.square3 p {margin-bottom:0px;line-height:15px;}
 
</style>
</head>
<body style="font: 1em/1.5em verdana;background-color:silver;">
 
<div class="square">
<strong class="top"><strong class="b1t"></strong><strong class="b2"></strong></strong>
<div class="boxcontent">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br><br>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .
</div>
<strong class="bottom"><strong class="b2"></strong><strong class="b1b"></strong></strong>
</div>

On voit bien que l'utilisation de Fieldset est nettement plus simple d'utilisation.

[Erwan31]

C'est bien ce que tu dit, mais alors, à quel moment faut-il utilise Fieldset et Legend ?

Dans un formulaire.
Le couple fieldset/legend permet de regrouper les champs de même thème
et fait parti des mesure d'accessibilité : legend - fieldset

[Candygirl]

C'est bien ce que tu dit, mais alors, à quel moment faut-il utilise Fieldset et Legend ?

Un petit tour dans la doc officielle w3c sur les éléments fieldset et legend:

17.10 Le rajout d'une structure aux formulaires : les éléments FIELDSET et LEGEND

L'élément FIELDSET perment aux auteurs de regrouper thématiquement les commandes et les labels apparentés. Le regroupement des commandes rend leur compréhension plus aisée aux utilisateurs, tout en facilitant la navigation par tabulation pour les agents utilisateurs visuels et la navigation vocale pour les agents utilisateurs vocaux. La bonne utilisation de cet élément rend les documents plus accessibles.

L'élément LEGEND permet aux auteurs d'assigner une légende à un élément FIELDSET. La légende renforce l'accessibilité quand l'élément FIELDSET est restituée de manière non-visuelle.

Edit: décidément... regrillée

[Erwan31]

Au moins il a les 2 versions : W3C et Accessiweb ^^

[jlb59]

C'est pas trop évident et j'ai pas très bien compris.
Il est dit :

L'élément FIELDSET permet aux auteurs de regrouper thématiquement les commandes et les labels apparentés

Pour le cas qui me préoccupe, c'est la page qui est encadrée, donc, tout est regroupé ????

Ce que je ne comprends pas du tout, c'est pourquoi c'est impeccable avec FF et pas avec IE ?????

Ca, c'est le problème que j'ai exposé.

Bien que les explications soient limpides pour certains, personnellement, j'ai lu mais cela ne résout pas mon problème.
Parce que j'ai essayé avec l'exemple donné sur "la-grange.net/w3c" pour le formulaire, et bien avec FF, no problem, mais avec IE, c'est exactement la même chose qu'avec mes propres pages.