FAQ version Beta 0.5
Positionnement, alignement, centrage
Min-width, max-width, min-height et max-height sur Internet Explorer
Internet Explorer dans ses versions inférieures à (less than) IE7 ne reconnait pas les propriétés max-width, max-height, min-width, min-height.
Il faut donc avoir recours à des subtilités pour les mettre en oeuvre.
----------------------------------
1- Concernant max-width, qui est une propriété très utile pour les design fluides à largeur controlée, on peut, par exemple, utiliser cette technique JavaScript développée ici : http://www.svendtofte.com/code/max_width_in_ie/
Exemple de style à placer en commentaire conditionnel pour IE lt IE 7 (lt signifiant less than : "plus petit que") :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->
Ce code dit que si la largeur du document est supérieure à 1000px, alors il sera forcé à 1000px, sinon il restera à "auto".
On peut aussi gérer la situation où le JavaScript est inactif en jouant sur le fait que plusieurs déclarations de la même propriété sont écrasées par la dernière de ces déclarations :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->
Dans ce cas si JavaScript est inactif le deuxième width sera purement et simplement ignoré et on aura un résultat en design fixe "raisonnable" d'une largeur de 770px.
Et si javascript est actif la deuxième déclaration du width écrasera la première.
NOTE : merci à clb56 pour ce point de la FAQ (http://forum.alsacreations.com/profile-97-clb56.html)
----------------------------------
2- La solution est semblable pour la propriété min-width :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
}
</style>
<![endif]-->
Le code dit que si la largeur du document est inférieure à 600px, alors elle est forcée à 600px (il y'a donc une apparition des barres d'ascenseur horizontales au seuil de 600px).
Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.
----------------------------------
2bis. Concilier min-width et max-width en même temps :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width: expression(document.body.clientWidth <= 600? "600px" : document.body.clientWidth >= 1000? "1000px" : "auto");
}
</style>
<![endif]-->
Si la fenêtre dépasse 1000px, elle sera ramenée à 1000px. Si elle est inférieure à 600px, elle sera ramenée à 600px. Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.
Source:
http://www.cameronmoll.com/archives/000892.html
----------------------------------
3- La solution pour min-height.
Notez que IE n'interprête pas correctement la propriété "height" et la considère comme "min-height" : elle s'allongera en fonction du contenu.
Ce n'est pas le comportement normal : les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.
Il suffit donc d'indiquer une hauteur (height) uniquement à IE6, et une hauteur minimale (min-height) pour les autres navigateurs.
<style type="text/css">
div {
min-height: 500px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div {
height: 500px;
}
</style>
<![endif]-->
----------------------------------
4- La solution pour max-height :
<!--[if lt IE 7]>
<style type="text/css">
div {
height: 500px;
overflow:hidden;
height:expression(
this.scrollHeight > 800? "800px" : "auto" );
}
</style>
<![endif]-->
Si la hauteur de la fenêtre est supérieure à 800px, alors elle sera forcée à 800px. Si JavaScript n'est pas actif, la hauteur sera de 500px.
D'autres solutions pour min-height et Internet Explorer :
* Module javascript [en] : http://www.doxdesk.com/software/js/minmax.html
* Div supplémentaire [en] : http://www.greywyvern.com/code/min-height-hack.html
* Jeu avec paddings [fr] : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height
Il faut donc avoir recours à des subtilités pour les mettre en oeuvre.
----------------------------------
1- Concernant max-width, qui est une propriété très utile pour les design fluides à largeur controlée, on peut, par exemple, utiliser cette technique JavaScript développée ici : http://www.svendtofte.com/code/max_width_in_ie/
Exemple de style à placer en commentaire conditionnel pour IE lt IE 7 (lt signifiant less than : "plus petit que") :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->
Ce code dit que si la largeur du document est supérieure à 1000px, alors il sera forcé à 1000px, sinon il restera à "auto".
On peut aussi gérer la situation où le JavaScript est inactif en jouant sur le fait que plusieurs déclarations de la même propriété sont écrasées par la dernière de ces déclarations :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth >= 1000? "1000px": "auto" );
}
</style>
<![endif]-->
Dans ce cas si JavaScript est inactif le deuxième width sera purement et simplement ignoré et on aura un résultat en design fixe "raisonnable" d'une largeur de 770px.
Et si javascript est actif la deuxième déclaration du width écrasera la première.
NOTE : merci à clb56 pour ce point de la FAQ (http://forum.alsacreations.com/profile-97-clb56.html)
----------------------------------
2- La solution est semblable pour la propriété min-width :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width:expression(document.body.clientWidth <= 600? "600px": "auto" );
}
</style>
<![endif]-->
Le code dit que si la largeur du document est inférieure à 600px, alors elle est forcée à 600px (il y'a donc une apparition des barres d'ascenseur horizontales au seuil de 600px).
Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.
----------------------------------
2bis. Concilier min-width et max-width en même temps :
<!--[if lt IE 7]>
<style type="text/css">
div {
width:770px;
width: expression(document.body.clientWidth <= 600? "600px" : document.body.clientWidth >= 1000? "1000px" : "auto");
}
</style>
<![endif]-->
Si la fenêtre dépasse 1000px, elle sera ramenée à 1000px. Si elle est inférieure à 600px, elle sera ramenée à 600px. Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.
Source:
http://www.cameronmoll.com/archives/000892.html
----------------------------------
3- La solution pour min-height.
Notez que IE n'interprête pas correctement la propriété "height" et la considère comme "min-height" : elle s'allongera en fonction du contenu.
Ce n'est pas le comportement normal : les autres navigateurs vont respecter la hauteur de façon rigoureuse et le contenu dépassera du bloc.
Il suffit donc d'indiquer une hauteur (height) uniquement à IE6, et une hauteur minimale (min-height) pour les autres navigateurs.
<style type="text/css">
div {
min-height: 500px;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
div {
height: 500px;
}
</style>
<![endif]-->
----------------------------------
4- La solution pour max-height :
<!--[if lt IE 7]>
<style type="text/css">
div {
height: 500px;
overflow:hidden;
height:expression(
this.scrollHeight > 800? "800px" : "auto" );
}
</style>
<![endif]-->
Si la hauteur de la fenêtre est supérieure à 800px, alors elle sera forcée à 800px. Si JavaScript n'est pas actif, la hauteur sera de 500px.
D'autres solutions pour min-height et Internet Explorer :
* Module javascript [en] : http://www.doxdesk.com/software/js/minmax.html
* Div supplémentaire [en] : http://www.greywyvern.com/code/min-height-hack.html
* Jeu avec paddings [fr] : http://www.ultra-fluide.com/ressources/css/css-hacks.htm#min-height
Liens complémentaires