La solution est de créer un design fluide "intelligent" qui se limite à une largeur maximale lorsque l'écran est grand, et à une largeur minimale si l'écran est réduit.
Ces propriétés existent en CSS, il s'agit de min-width (largeur minimale) et max-width (largeur maximale).
/* Format de la page web */
div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}
L'élément <div> va occuper 80% de la largeur. Si cette largeur dépasse 1000px, elle sera fixée à 1000px. Si cette largeur est inférieure à 700px, elle sera fixée à 700px.
Les navigateurs actuels, dont Internet Explorer 7, reconnaissent ces deux propriétés très utiles. Cependant, ce n'est malheureusement pas le cas pour les versions précédentes d'Internet Explorer, notamment le très utilisé IE6.
Internet Explorer 6 et les versions inférieures ne comprennent pas les propriétés min-width et max-width, il faut donc avoir recours à des subtilités pour les mettre en oeuvre.
Il existe une technique JavaScript qui nécessite d'inclure du JavaScript au sein du code CSS, ce qui provoquera une erreur de validation. Il est donc fortement recommandé de ne l'appliquer que pour Internet Explorer et non sur les autres navigateurs. Pour cela, nous aurons recours aux commentaires conditionnels.
Exemple de style à placer en commentaire conditionnel pour IE lt IE 7 (lt signifiant less than : "plus petit que"), à placer dans le <head> de votre page HTML :
<!--[if lt IE 7]>
<style type="text/css">
div {
width: 770px;
width: expression(document.body.clientWidth >= 602? "600px" : document.body.clientWidth <= 1002? "1000px" : "auto");
}
</style>
<![endif]-->
Si la fenêtre dépasse 1002px, elle sera ramenée à 1000px. Si elle est inférieure à 602px, elle sera ramenée à 600px. Si JavaScript n'est pas actif, alors la largeur est fixée à 770px.
Notez les valeurs différentes (602px et non 600px) en raison d'un bug d'IE6 qui freeze (écran figé) si les valeurs sont identiques : "If you're using IE 6 and you drag the window pane to resize, it freezes.".
Cette méthode devrait vous permettre de vous affranchir des limites d'Internet Explorer 6 et d'obtenir un design fluide "intelligent".