min-height et firefox

**wam_baloo** · 05/06/2008, 15h02

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 :

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
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&eacute;pertoire &agrave; 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&eacute;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&eacute; :</h3>
				<font size="1" color="red"><i>(Indiquez ici le pr&eacute;fixe du nom du fichier de configuration d&eacute;sir&eacute;, 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 :

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
 
#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 :

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

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.

**orphen** · 05/06/2008, 17h06

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

Les deux ie l'interpreteron mais pas firefox

**razorlok** · 05/06/2008, 17h07

Donc si j'ai bien compri, quand tu enlève

Code :

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

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 :

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

1
2
3
4
5
6
 
html>body fieldset
{
	height: auto;
}

et de rajouter dans

Code :

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

1
2
3
4
5
6
fieldset
{
	height: 500px;
	min-height: 500px;
        /height:auto;
}

**wam_baloo** · 06/06/2008, 09h29

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.

**Candygirl** · 06/06/2008, 10h03

Bonjour,

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 :

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

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

**wam_baloo** · 06/06/2008, 11h09

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.

min-height et firefox

CSS

Vue hybride

Discussions similaires

Partager

Partager