Discussion :

[guismojames]

Bonjour,

Voici mon petit code pour mes fieldset :

Code :

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

1
2
3
4
5
 
<fieldset style="padding:1.4em;margin: 0 0 1.5em 0;border: 1px solid #ccc;background: url('fieldset_bg.png') bottom repeat-x;">
<legend style="font-weight: bold;color: #444;font-size: 1.1em;margin-bottom: 1.4em\9;">TEST</legend>
CONTENT
</fieldset>

Pour plus de clarté je vous formate le css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
fieldset
{
padding:1.4em;
margin: 0 0 1.5em 0;
border: 1px solid #ccc;
background: url('fieldset_bg.png') bottom repeat-x;
}
legend
{
font-weight: bold;
color: #444;
font-size: 1.1em;
margin-bottom: 1.4em\9;
}

Sous Chrome j'ai implacablement ce que je souhaitai mais pas sous IE ^^

Chrome :


IE :


Je suis pas encore au point avec le CSS, la rétro-compatibilité, et encore moins IE ^^

D'avance merci.

[devyan]

Bonjour,

Je vois une tentative de hack pour IE ("\9") ça ne passera pas la validation W3C

Code css dans le head de la page, sinon il faut faire un fichier externe spécifique :

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
<style>
fieldset
{
padding:1.4em;
margin: 0 0 1.5em 0;
border: 1px solid #ccc;
background:url('fieldset_bg.png') bottom repeat-x;
}
legend
{
font-weight: bold;
color: #444;
font-size: 1.1em;
}

</style>

<!--[if IE]>
<style>
fieldset
{
padding-top:0;
}

legend
{
margin-bottom: 1.4em;
margin-top:-1em;
padding-top:0.4em;
}
</style>
<![endif]-->

devyan

[guismojames]

Merci ^^

En effet, la validation ma la rejeté xD