28173 sujets

CSS et mise en forme, CSS3

Probleme de marge avec fieldset sous firefox

Salut à tous,

j'ai résolu un problème de fieldset avec IE grâce au petit hack suivant.
Mon problème est que me maintenant, je ne peux plus ajouter de marges autour de mon fieldset car cela fait comme si j'ajoutais un padding sur la balise html (uniquement sous firefox).

Je ne suis sûrement pas clair donc voici le code complet de ma page html de test.

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

* {margin: 0; padding: 0;}
html {height:100%;width:100%;background-color:red;}
body {height:100%;width:80%;background-color:Green;}

html fieldset{ position: relative; margin:3em; padding:2em; background-color:gray;}
html legend{ position:absolute; top: -.5em; left: .5em; }

</style>
<title>PAGE DE TEST</title>
</head>

<html>
<body>

<fieldset><legend>Contact Information</legend>

<input type="submit" value="envoyer" class="button" />
<input type="text" value="value test" class="text"/>

</fieldset>

</body>

</html>


Vous verrez, pas de probleme ni sous IE6 ni IE7 par contre sous firefox si je veux changer la taille du margin du fieldset, c'est le html qui change (en rouge).
Comment avoir le même rendu que sur explorer ?
Toute solution sera la bienvenue.
Modifié par taro (06 Dec 2006 - 23:07)
merci pour le lien mais je n'ai pas l'impression que mon probleme a un lien avec les fusions de marge.
Sinon cela voudrait dire que le padding de mon fieldset fusionne avec le margin de l'element html ??

J'ai tout de même essayé les solutions proposées sur ton lien mais sans résultats Smiley decu
J'ai quand même l'impression que si : si tu enlèves le margin de ton fieldset, tu n'as plus de problème.

On peut aussi résoudre ton problème en écrivant :
body {height: 98%; padding: 1%; width: 80%; background: green;}
Ceci dit, je suis peut-être à côté de la plaque. Smiley smile
Sujet clos
Aller à