Fieldset différent FF et IE

Version imprimable

23/04/2008, 15h10
jlb59

Fieldset différent FF et IE

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.
http://qi98.free.fr/tmp/err_ff.jpg
Par contre, avec IE, là il y a une sacrée différence.
http://qi98.free.fr/tmp/err_ie.jpg

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

Merci d'avance.
23/04/2008, 18h26
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:

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

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:

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.

23/04/2008, 20h30
Erwan31

Citation:

Envoyé par jlb59

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
23/04/2008, 20h32
Candygirl

Citation:

Envoyé par jlb59

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:

Citation:

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 ;)
23/04/2008, 20h46
Erwan31

Au moins il a les 2 versions : W3C et Accessiweb ^^
24/04/2008, 07h32
jlb59

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

Citation:

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.
24/04/2008, 08h02
jlb59

Pour infos à tous ceux qui m'ont aidé.

J'ai effectivement essayé l'exemple, mais à partir de mon site et j'ai eu le même problème d'affichage.
Par contre, en essayant l'exemple seul, l'affichage se faisait bien.

Donc, j'en conclu que mon site est mal agencé et je vais le revoir complètement.

Merci à tous.
24/04/2008, 15h20
Erwan31

Encore une fois jlb le couple fiedset/legend n'est pas un choix pertinent et tu
peux obtenir le même réslutat avec un simple div et un h1 ;)