Min-height sur Internet Explorer

élucubrations XHTML, CSS
et Standards web

Recherche par mot-clés

CSS · XHTML · Standards W3C · Webdesign · Accessibilité · Référencement · JavaScript · PHP · Humour

AlsaQuiz

A retenir

Syndication

Rédacteurs du blog

Partenaires

Poster

Question souvent posée, celle de la propriété min-height non reconnue IE.

Voici quelques hacks diffusés sur le web :

Pourtant, il semblerait qu'une petite astuce puisse régler ce problème, en tout cas sur bon nombre de navigateurs.

Il suffit de commencer par donner une hauteur fixe au bloc (#bloc). Cette hauteur sera considée comme un min-height pour IE : elle s'allongera en fonction du contenu.
Par contre, les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.
Il suffit alors de rajouter une instruction non comprise par IE (html>body #bloc) et qui rétablira les choses pour ces navigateurs.

Cette astuce m'a été donnée par Antoine.

Si quelqu'un pouvait faire des tests sur différents navigateurs standards :

#bloc {
height: 5em;
background: yellow;
}
html>body #bloc {
height: auto;
min-height: 5em;
}

Par Raphael GOETTER - mardi 17 août 2004 à 17:18

Astuces - #54 - Lu 40763 fois - Intérêt du billet: 3.53(55) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mardi 17 août 2004 à 17:37, par S.F. :: site :: #

Pff c'est vieux, ça fait des mois que je la donne sur les forums, cette astuce

Le mardi 17 août 2004 à 17:44, par Raphael Goetter :: site :: #

@S.F. > Il existe des forums que je ne connais pas encore !?!?
Bon ben vu la simplicité de l'astuce, il était bien surprenant qu'elle soit inédite et récente

Le mardi 17 août 2004 à 18:42, par Surfoo :: #

Merci, pour l'astuce. J'avais ce problème aussi mais je ne savais pas trop comment faire pour le résoudre, maintenant c'est fait !

Le mardi 17 août 2004 à 18:52, par Julio :: #

Ceci m'a pété les ... il y a 3 jours, pas mal en tout cas même si en finale je l'ai contourné...

Le mardi 17 août 2004 à 19:59, par Xavier :: site :: #

Pour le cas ou html>body #bloc pose un problème sur un navigateur, je donne le hack inverse :
* html #bloc {height: 5em}
#bloc {
background: yellow;
min-height: 5em;
}
En effet * html #bloc n'est visible que de IE (c'est un bug IE car ce sélecteur sélectionne un ensemble vide de balise).

Ceci étant il faut savoir que Safari (même la récente version 1.2.2) ne connait pas min-height. Donc retour à la case départ. Dans un tutorial que j'avais écrit il y a un an je préconisais d'introduire un flottant de largeur 0 et de la hauteur désirée. En gros dans le bloc il faut ajouter:
#div-min-height {position:relative;width:0;height 5em;float:left}
#div-min-height-bottom {position:relative;height:0;clear:left}

J'avoue que ce n'est pas estétique. Mais à aujourd'hui je n'ai rien trouvé d'autre pour Safari. Je sui preneur d'un bon tuyau la dessus.

Le mardi 17 août 2004 à 20:24, par mee2 :: site :: #

wellstyled.com/css-minhei... =)

Sinon, pour aider Safari et IE à suivre il y a ça : annevankesteren.nl/archiv...

Le mardi 17 août 2004 à 23:00, par kurt :: #

Cette astuce a beau être citée sur tous les forums d'entre-aide, ici, elle est clairement expliquée et m'a bien aidé ! Merci.

Le mercredi 18 août 2004 à 08:50, par Fred C. :: site :: #

Le site suivant propose une variante sur le même thème :

www.wellstyled.com/css-mi...

/Fred

Le mercredi 18 août 2004 à 16:45, par Xavier :: site :: #

@mee2 >
Vraiment extra ton lien pour Safari. En fait ça simplifie complètement le problème puisque ça marche pour l'ensemble des navigateurs (testé pour ma part sur Mozilla, IE, Opéra, Safari).
un grand merci.

Le jeudi 19 août 2004 à 18:50, par Talou :: site :: #

Il me semble qu'on peut encore réduire le code. Dites-moi si je me trompe, mais si on fait :

#bloc {
height: auto !important;
height: 5em;
min-height: 5em;
}

le auto passe inapperçu pour ie et garde sa priorité pour gecko/safari/opera.

N'est-ce pas ? (je n'ai pas d'opera/safari pour tester)

Le dimanche 22 août 2004 à 12:06, par simOn :: site :: #

Oui, pas très nouveau et personnellement, j'utilise la formule moins verbeuse décrite par Talou

Le mardi 24 août 2004 à 12:14, par alexboom :: #

Bonjour Raphaël,

Désolé pour le commentaire sans rapport avec la note, mais voici un lien qui devrait montrer la popularité de ton site :
www.google.fr/search?q=Si...

la phrase en question est celle du tutorial sur le preload en CSS.
C'est surprenant de retrouver Micro Application en numéro 1 !

Félicitations et bon courage

Le vendredi 8 octobre 2004 à 11:45, par Raphael :: site :: #

@Talou > Question en passant : si height: auto !important; passe inaperçu sur IE, est-ce parce que IE ne reconnaît pas !important ou parce que IE ne reconnait pas la valeur auto sur height ?

Le lundi 29 novembre 2004 à 23:48, par Raphael :: #

Autres solutions :

1)
#bloc {
height: auto;
min-height: 5em;
_height: 5em; // underscore hack uniquement interprété par IE Win
}

wellstyled.com/css-unders...

2)
#bloc {
height: auto;
min-height: 5em;
}
* html #bloc {
height: 5em; // hack uniquement interprété par IE Win+Mac
}

centricle.com/ref/css/fil...

Le mercredi 16 mars 2005 à 16:59, par Macpom :: #

Commentaire tardif, mais comme un lien renvoie sur cet article actuellement...
@ Raphael > ie reconnaît "!important" puisque je l'ai utilisé pour d'autres valeurs. Déduction logique : ie ne reconnaît pas la valeur auto sur height...

Le mardi 12 avril 2005 à 08:29, par Rock Lee :: #

Bien vu lulu,

Ca faisait 2 jour que çà me les brisait et là pouf la réponse en deux ligne de code.

De la balle

Le jeudi 9 juin 2005 à 11:27, par moe :: site :: #

hello j'arrive un peu tard pour poser une question mais on ne sait jamais En fait sur mon site vos astuces marchent (avec l'astuce d'alsacréations mais aussi celle avec l'ajout d'un underscore), mais pour que ça marche, ma souris doit se positionner sur un lien par exemple, ou un smiley clickable. Je ne comprends pas trop...

Le mercredi 15 juin 2005 à 19:18, par Merkel :: #

Moe, je te suggère de poser ta question dans le forum et de fournir du code ou un lien pour constater le problème.

Le mercredi 15 juin 2005 à 20:07, par Xouuox :: #

WA trop pratique l'hiostoire du underscore merci beaucoup Raphael merci encore

Le jeudi 23 juin 2005 à 10:10, par Delphine :: site :: #

Excellent le hack de Safari ! Je commençais à désespérer !
Merci !

Le dimanche 3 juillet 2005 à 17:02, par Draiwn :: #

Mille merci !!

Le jeudi 21 juillet 2005 à 18:42, par frédéric :: site :: #

Bonjour,

la technique du underscore marche parfaitement. je me prenais la tête depuis deux jours, et avec mediawiki c'est pas de la tarte, merci bcp!

a+,
fred