Etape 6 : ajustements pour IE6
Si vous retournez à l'étape précédente et que vous visualisez la page dans IE 6, vous allez observer une série de problèmes, notamment de positionnement, dus à la compréhension approximative des CSS par ce navigateur.
Nous allons jouer à la chasse aux différences, et les effacer une à une, en utilisant les commentaires conditionnels.
Les commentaires conditionnels
Le mécanisme des commentaires conditionnels permet d'insérer proprement (c-à-d sans devoir utiliser de "hack") dans la page du code html qui ne sera lu que par IE Windows. Nous allons nous en servir pour ajouter une feuille de style dédiée à IE, jusqu'à la version 6 (incluse) :
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" /> <![endif]-->
C'est dans cette feuille de style que nous allons apporter les modifications nécessaires pour obtenir un affichage correct dans IE. Puisque la feuille n'est lue que par IE, ces modifications n'affecteront pas les autres navigateurs.
Pour en savoir plus sur les commentaires conditionnels : dans la FAQ et sur Blog & Blues.
La plupart des soucis que l'on rencontrait avec IE6 et les versions plus anciennes ont été corrigés dans IE7, qui est beaucoup plus respectueux des standards que ses prédecesseurs.
Les commentaires conditionnels seront donc destinés uniquement à IE 6 & antérieurs.
La hauteur de la page
Sous IE 6, la page n'occupe pas toute la hauteur, car IE ne reconnaît pas la propriété min-height. Par chance (dans notre cas), IE ne comprend pas bien height, et l'interprète comme s'il s'agissait de min-height :
#global {
height: 100%;
}
La marge gauche de #content
La marge gauche affichée par IE6 pour #content est deux fois plus grande que celle voulue. C'est un bug fréquent et connu, qui se corrige en appliquant :
#content {
display: inline;
}
Le positionnement du pied de page
Le footer est de nouveau venu se placer en bas du premier écran (rappelez-vous ce qui s'est produit lors du positionnement des colonnes).
Pour forcer IE à englober les flottants dans le calcul de la hauteur de #center, il faut doter celui-ci du layout. Par exemple, en appliquant :
#center {
overflow: visible;
height: 1%;
}
Layout ? C'est quoi ça ?
En version très simple : c'est un mécanisme particulier du moteur de rendu d'IE, qui traite différement les éléments dotés de certaines propriétés.
hasLayout property (en) et Le concept de hasLayout dans IE/Win
Les marges supérieures des colonnes
Sous IE, le premier titre de chaque colonne est collé au header. Il suffit d'ajouter une marge dans les commentaires conditionnels :
#content, #sidebar {
margin-top: 15px;
}
Les PNG transparents
Dans l'arrière-plan de #global, on a utilisé un PNG transparent, qu'IE6 ne sait pas gérer. Il remplace les pixels transparents par des pixels gris. Nous allons utiliser une recette de chez Microsoft pour lui faire avaler la pillule : le filtre AlphaImageLoader (en).
#global {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");
}
Cependant, ce n'est pas une solution miracle. Le fonctionnement de cette propriété est assez obscur et entraîne des effets indésirables. En effet, si on laisse les choses en l'état, les liens du menu ne sont plus cliquables ! De même, le scroll des zones de code ne fonctionne plus. Il faut ajouter :
#global {
position: static;
}
a, pre {
position: relative;
}
pour récupérer un comportement normal des liens & des barres de défilement. On peut s'attendre à observer le même comportement avec tous les éléments "interactifs" de la page. Prudence, donc.
A propos de l'utilisation de filter : pour les images de fond, et pour les images en dur <img /> (en).
Il reste à corriger la position du pied de page avec :
body {
position: relative;
}
Félicitations, c'est terminé !