Legend et Firefox

Firefox m'embête. Je voudrais positionner la balise legend en relatif afin de lui donner des dimensions précises. Sous Safari, aucun problème, sous IE (presque) aucun problème. Mais Firefox, impossible. Les seules propriétés que je peux changer sur legend sont font-size et color... Après moult recherche, j'ai finalement compris pourquoi. Dans la css par défaut de Firefox ( /res/forms.css), on a ceci :

legend {
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  position: static ! important;
  float: none ! important;
}

Je tente donc de résoudre le problème en mettant ceci dans mon style :

		legend {
			position: absolute !important;
			width: 100%;
		}

Que dalle. Il s'en fout. Et c'est bien ce !important qui pose problème, car après l'avoir commenté dans la css de firefox, et rebooté celui-ci, ma css perso fonctionnait.

Quelqu'un voit il une solution avant qu'on en arrive à faire du code dégueulasse (genre masquer le legend et mettre un div en dessous )
Modifié par Hadrien.eu (26 Sep 2006 - 22:37)

Bon, j'ai trouvé une solution bidouillesque de secours :

<style type="text/css">
		legend {
			padding: 0;
		}
		.legend {
			position: absolute;
			margin-top: -30px;
			margin-left: -12px;
			background: red;
			width: 295px;
			height: 30px;
			display: block;
		}
	</style>

<div style="width: 300px; margin-top:30px;">
<fieldset>
	<legend><span class="legend">yo</span></legend>
	<label>yé</label>
</fieldset>
</div>

C'est pas la panacée, mais ça fonctionne... Si quelqu'un a une VRAIE solution bien propre, je prends !!!

Nan je crois que c'est la seul solution. Je me suis déja penché sur la solution à plusieurs reprises et c'est celle ci qui fonctionne (en après ça dépend de ce que l'on veut faire)
Mais le fieldset en générale est assez difficile à styler sur plusieurs navigateur (IE, FF, Opéra, Safari).

C'est ballot