IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

min-height et firefox


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Février 2006
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 14
    Par défaut min-height et firefox
    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.

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut
    dans ce cas utilise un hack pour ie
    rajoute /devant ta fonction.

    Les deux ie l'interpreteron mais pas firefox

  3. #3
    Membre confirmé Avatar de razorlok
    Profil pro
    Inscrit en
    Novembre 2006
    Messages
    211
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 211
    Par défaut
    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;
    }

  4. #4
    Membre averti
    Inscrit en
    Février 2006
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 14
    Par défaut 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.

  5. #5
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Bonjour,

    Citation Envoyé par wam_baloo Voir le message
    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
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  6. #6
    Membre averti
    Inscrit en
    Février 2006
    Messages
    14
    Détails du profil
    Informations forums :
    Inscription : Février 2006
    Messages : 14
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probleme de min-height sous Firefox
    Par doc51 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/06/2009, 14h11
  2. min-height et Firefox
    Par flogreg dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/07/2008, 11h20
  3. min-height avec Firefox
    Par jadorelescss38 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/03/2007, 11h16
  4. [HTML-CSS][IE-FIREFOX] problème de height sur Firefox
    Par sanosuke85 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 04/03/2006, 17h31
  5. Problème hauteur height et min-height
    Par Royd938 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/11/2005, 17h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo