Ceci est le premier article d’une longue série. Au fil de mes expériences dans le Web, j’essaierai de vous faire connaître les problèmes que je rencontre au quotidien et les solutions que je trouve pour les régler.
Dans cet article, je vais vous montrer comment simuler le comportement de min-height, une propriété CSS très utile mais très peu jamais utilisée car non comprise par Internet Explorer 6 et inférieurs (au même titre que max-height, max-width et min-width).
Il existe plusieurs solutions pour arriver à nos fins. La première consiste à exploiter la mauvaise interprétation par IE6 des propriétés height et width. En effet, sur IE6, si le contenu d’un bloc dépasse la largeur ou la hauteur définie, le bloc va s’agrandir, ce qui n’est pas le comportement normal (dicté par le W3C). On utilise aussi la non compréhension par IE6 de l’argument CSS !important. Ce dernier permet à l’attribut auquel il est ajouté de prendre le pas sur tous les mêmes autres attributs qui pourraient se trouver à l’intérieur de la même class ou du même id :
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Comment IE6 va l’interpréter ?
Il ne va pas comprendre min-height ni !important (qu’il est bête) mais uniquement height. Comme height se comporte comme min-height devrait se comporter (s’il était compris), on a bien une taille minimum de 500 pixels.
Comment les navigateurs modernes (IE7, Firefox, Opera, etc.) vont l’interpréter ?
Ils vont lire le min-height et les deux height mais prendre en priorité height:auto. Comme auto est la valeur par défaut de height, c’est comme si la propriété n’existait pas. On a bien une taille minimum de 500 pixels.
La deuxième solution consiste à faire appel à un fichier JavaScript qui va tout faire tout seul. Il suffit de l’inclure uniquement dans le cas où le navigateur est IE6 ou inférieur, via un commentaire conditionnel. Cette solution est la moins élégante (quid des gens qui désactivent JavaScript) mais de loin la plus facile à intégrer.
Ajouter ces quelques lignes dans le head de votre fichier (X)HTML :
<!--[if lte IE 6]> http://minmax.js <![endif]-->
Le fichier minmax.js est téléchargeable sur cette page. Tous les min-height, max-height, min-width et max-width seront interprétés sur IE6 via ce fichier JavaScript (avec un petit temps de latence).
Les commentaires conditionnels sont des commentaires uniquement interprétés par Internet Explorer. Vous en trouverez une excellente explication chez Laurent Denis. Dans le cas qui nous occupe, le fichier JavaScript ne sera appelé que si le navigateur est inférieur ou égal à IE6.
Si vous avez des problèmes de compatibilité avec vos XHTML et CSS, n’hésitez pas à m’expliquer le problème dans les commentaires. Si je l’ai déjà expérimenté, j’essaierai de vous apporter la (ou les) solutions pour les résoudre.
Sources :
* Le Hack CSS !important
* Min-Height Fast Hack
* Les syntaxes de commentaires conditionnels pour IE Windows
* minmax.js
Le blog de Vincent Battaglia 
Je découvre ton blog également suite à ton commentaire chez moi, très sympa, je repasserai régulièrement … allez hop, dans le blogroll ! 🙂
LikeLike
bien vu
LikeLike
bien vu, personnellement, je n’utilisais que le hack en js…
Et hop blogmarké!
LikeLike
J’ai ça moi:
LikeLike
Bien vu et sympa de prendre le temps de donner tout ces petits conseils aux autres qui sont en gélère !
LikeLike
étrangement je n’arrive pas a mes fins
j’ai placé le if dans le javascript
j’ai j’ai placé minmax.js au niveau de mon fichier php qui se trouve lui-même au niveau de mon fichier css
et je n’arrive toujours pas à utiliser min-width sous ie6
LikeLike
oups un ptit correctif par rapport au post précédent
j’ai placé mon if dans le head de mon fichier php
LikeLike
super astuce merci!!
j’avais presque trouvé tout seul mais il me manquait la mention !important placée au bon endroit.
LikeLike
Merci pour le tuyaux,
LikeLike
Merci beaucoup. Très utile.
LikeLike
merci pour cette explication c’est très interrissant
LikeLike
Le problème est que minmax.js est incompatible avec le menu déroulant superfish. à moins que tu ai une solution 😉
LikeLike
Exactement ce que je cherchais et ça marche nickel !
Merci
LikeLike
Absolument génial : simple et efficace !
Merci
LikeLike
Personnellement j’ai testé et je ne vois pas comment sa peut fonctionner.
Car supposons qu’on a une div qui grandisse en fonction du contenu :
#popup_content{
min-height:199px;
height: auto !important;
height: 199px;
}
je ne vois pas comment le auto sera pris en compte si le contenu de la div depasse les 199px.
LikeLike
height:auto va être pris en compte en priorité via la mention !important http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
LikeLike
Oui mais ie6 ne comprend pas le !important si je ne me trompe. Donc dans le cas ie6
min-height: il connait pas donc passe à
height: auto !important : il ne connait pas,
donc a chaque fois il utilisera le height 199px !
LikeLike
Oui on joue sur le fait que IE6 ne connait pas !important et que le height dans IE6 se comporte comme min-height. Relis bien l’article (plusieurs fois) et teste pour t’apercevoir que ça fonctionne 😉
LikeLike
En faite sa marche dans un exemple tout seul, mais pas dans mon projet 😉
LikeLike