bonsoir ,
j'amene aussi une petite contribution au probleme.
tout d'abord j'ai replacé le fieldset dans un formulaire , puis j'ai fait usage des display:table et compagnie pour positionné le legend au centre dans ff , qui passe aussi sur la version d'opera que j'ai .
une autre piste aurait peut-etre pus etre le content:''; pour effacer le contenu du legend , coupler a un legend:after en recreant une balise virtuelle de toutes pieces. (pas tester , mais il ya paeut-etre quelquechose de ce coté la aussi ).
<edit> aussi choisir un doctype adequat </>
Pour IE , j'ai regarder vers le position relatif et absolu pour le fun .
http://gcyrillus.free.fr/essai/legend-au-centre.html
le code :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css">
body {
font-family:"Trebuchet MS",Verdana,Arial,Helvetica,Sans-serif;
font-size:12px;
background:#789;
color:#fff;
padding:3em;
}
form {
/* width:100%; accesoire inneficace dans firefoxe , se repporter sur le fieldset */
display:table;
}
fieldset {
display:table-caption;/* moins contraignant que le table-cell dans ce cas */
width:80%;/* quasi obligatoire de donnée une largeur */
margin:auto;
}
legend {
display:table;/* equivaut grosso-modo au inline-block en resultat */
background:#456;
margin:-1em auto 0 ;/* on le remonte vu qu'il ne se comporte plus comme un legend */
}
</style>
<!--[if IE]>
<style type="text/css">
/* laurent denis */
/*
legend {
margin: auto;
width: 1%;
display: block;
}
*/
/* pour accompagner la soluce IE de laurent denis sans y toucher */
/*
legend {
margin-top:0;
}*/
/* ma bidouille [smile] relatif/absolu */
fieldset {
position:relative;
width:100%;
padding-top:1em;
}
legend {
position:absolute;
right:50%;
margin-left:-50%;
}
</style>
<![endif]-->
</head>
<body>
<form>
<fieldset>
<legend >arf</legend>
<label>Nom</label> : <input type="text" />
</fieldset>
</form>
</body>
</html>
l'usage du display:table; necessite une largeur pour que le formulaire ne s'ecrase pas sur lui même , dans firefoxe , la largeur est a donné au fieldset mis en display:table-caption; , les autres je ne sais pas si il est pris dans la balise <form> ou si le comportement est identique a ff.
D'ailleurs , je n'ai aucune idée du resultat chez les utilisateur mac ....
GC
ouverture d'un commentaire omise , corrigé .
Modifié par gcyrillus (02 Nov 2006 - 08:05)
Qu'est-ce que c'est le statut haslayout ?
?