min-height et firefox

Version imprimable

Bonjour à tous,

après avoir parcouru un bon nombre de forums, cherché avec mon Google des solutions, je n'ai pas encore trouvé mon bonheur. Cette question à déjà été posée plusieurs fois (puisque j'ai parcouru les réponses ^^), mais visiblement ça ne veut pas marcher chez moi. Je vous explique.

J'ai un site tout moisi composé de quelques pages. Mon souci se pose avec mon index. Il est composé d'un div, contenant deux fieldset l'un à côté de l'autre, voici mon index :
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head></head> <link href="main.css" rel="stylesheet" type="text/css"> <body> <div id='content'> <fieldset id='leftside'> <legend>Gestion des include_path</legend> <h3>Entrez le répertoire à scanner pour le remplacement des include_path ...</h3> <form name='frm_scan' action='scan.php' method='post' target="_blank"> <input type='text' name='folder' value='' size='60' /> <input type='submit' name='submitform' value='Ok' /> </form> <h3>... ou choisissez parmis les répertoires suivants :</h3> <ul> <li><a href='scan.php?folder=/blablabla/' target="_blank">Site1</a></li> <li><a href='scan.php?folder=/blablablabla/' target="_blank">Site2</a></li> </ul> </fieldset> <fieldset id='rightside'> <legend>Gestion des define</legend> <form name='frm_define' action='varlist.php' method='POST' target="_blank"> <h3>Choisir une application ...</h3> <table class="table_checkbox"> <tr><td width="50%" class="right_align"><input type="radio" name="folder" value="/blablabla/"></td><td class="left_align">B2B</td></tr> <tr><td width="50%" class="right_align"><input type="radio" name="folder" value="/blablablabla/"></td><td class="left_align">WebService</td></tr> </table> <h3>... et le nom du fichier de configuration associé :</h3> <font size="1" color="red"><i>(Indiquez ici le préfixe du nom du fichier de configuration désiré, il sera automatiquement suivi de .conf.php)</i></font><br /><br /><br /><br /> <input type="text" name="config_name" value="" /><br /><br /> <input type="submit" name="submit" value="Ok" /> </form> </fieldset> </div> </body> </html>
et voici un bout de mon css associé (juste la partie qui me prend le chou) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 #leftside { width: 50%; float: left; } #content { max-width: 1024px; margin: auto; } fieldset { height: 500px; min-height: 500px; } html>body fieldset { height: auto; }
Voila alors en fait, mes fieldset font bien 500px au minimum sous IE, et s'agrandissent bien lorsque je rajoute du contenu. Mais sous Firefox, impossible. Ils s'agrandissent bien quand je rajoute du contenu, mais ils ne font jamais 500px minimum. Si j'enlève le dernier bloc de mon css :
Code:

1 2 3 4 5 html>body fieldset { height: auto; }
dans ce cas la ça marche pour Firefox, mais plus pour IE (normal).

J'ai essayé pas mal de solutions trouvées sur le net (!important, mettre height à 100% pour tous les éléments parents, ...) mais rien n'y fait.

Merci d'avance pour votre aide.

Cdlt,
WaM.

05/06/2008, 17h06
orphen

dans ce cas utilise un hack pour ie
rajoute /devant ta fonction.

Les deux ie l'interpreteron mais pas firefox :)
05/06/2008, 17h07
razorlok
Donc si j'ai bien compri, quand tu enlève
Code:

1 2 3 4 html>body fieldset { height: auto; }
L'affichage te convient pour Firefox, mais plus pour IE ?

Dans ce cas, as tu essayé d'enveler
Code:

1 2 3 4 5 6 html>body fieldset { height: auto; }
et de rajouter dans
Code:

1 2 3 4 5 6 fieldset { height: 500px; min-height: 500px; /height:auto; }
06/06/2008, 09h29
wam_baloo

Toujours pas...

J'ai essayé d'enlever la partie html>body fieldset et de rajouter /height: auto;

Ca ne marche pas. La hauteur minimum est bien à 500px (c'est un bon point), mais par contre elle n'augmente pas en fonction du contenu, donc le contenu dépasse sans que le cadre s'ajuste. Sous IE, toujours pas de différences, tout fonctionne nickel.

C'est marrant de voir que j'ai le problème inverse à tout le monde, à savoir que le min-height fonctionne sous IE mais pas sous Firefox lol. Bref, si quelqu'un a une idée, je suis preneur.

Merci en tout cas pour votre aide.
06/06/2008, 10h03
Candygirl
Bonjour,

Citation:

Envoyé par wam_baloo

C'est marrant de voir que j'ai le problème inverse à tout le monde, à savoir que le min-height fonctionne sous IE mais pas sous Firefox lol.

Le min-height ne fonctionne pas sous IE6 mais c'est le height qui réagit comme un min-height...
Code:

1 2 3 4 5 6 7 8 9 10 fieldset { height: 500px; min-height: 500px; } html>body fieldset { height: auto; }
Dans ce code, on fixe un min-height pour les navigateurs l'interprétant et un height pour IE6 qui ne sait pas interpréter le min-height mais dont le height réagit (presque) comme un min-height.

Avec le html>body on utilise le sélecteur d'enfant non reconnu par IE6 mais que les autres navigateurs interprèteront. Le but est donc de rétablir un height auto pour tout le monde sauf IE6-. Cette méthode n'est pas très propre mais elle fonctionne ... en principe.

Le problème est que l'élément fielset est à l'origine de pas mal de bugs et mauvais comportements sur quasi tous les navigateurs.
Ici, c'est un bug reporté en 2003 déjà (! une bonne occasion de pester contre autre chose que IE ;) ):
le min-height sur un fieldset n'a aucun effet sur Firefox :(
06/06/2008, 11h09
wam_baloo

Ok merci pour cette réponse !! au moins je chercherai plus pour rien en sachant maintenant que le problème vient de firefox et n'est pas prêt d'être reglé.

Merci.