CSS / 3 colonnes / en-tête / pied de page
pas de javascript, pas de tableau, pas d'image
Quelques hacks pour MSIE et Mozilla.
La compatibilité avec plusieurs navigateurs est parfois difficile à réaliser.
Une fois le DOCTYPE choisi, les margins et paddings fixés, Mozilla et Opera donnent sensiblement le même résultat à l'écran.
Il faut donc cacher des règles ou des valeurs à Internet Explorer grâce à des filtres ou "hacks".
Cacher une règle
Si vous voulez cacher une règle comme :first-letter à MSIE 5.5 et 6, vous pouvez utiliser :
html>body p:first-letter,html>body div:first-letter{
font-weight:bold;
}
Si vous voulez cacher une règle comme height:1%; à Mozilla, Opera et Internet Explorer 7, vous pouvez utiliser :
* html #menubas{
height:1%;
}
Si vous voulez cacher une règle comme height:1%; à IE/Mac mais l'appliquer à IE/Win pour activer hasLayout, vous pouvez utiliser :
/* caché pour IE_Mac début\*/
* html #menubas{
height:1%;
}
/* fin - IE_Mac reprend sa lecture*/
#menubas{
min-height:1%;/*pour IE 7*/
}
Fixer une valeur
Si vous voulez fixer des valeurs différentes à margin à IE/Win 5, 5.5 et 6 (en Mode "Standard Compliant" grâce au DOCTYPE), vous pouvez utiliser :
#zone_haut dl{
margin:-.1em 0 0; /*tous sauf MSIE/Win*/
}
/* caché pour IE_Mac début\*/
* html #zone_haut dl{
margin:-.5em 0 -.4em 0;/*valeur pour MSIE 5*/
}
* html #zone_haut dl/**/{
margin/**/:-.4em 0 0; /*valeur pour MSIE 5.5*/
margin:/**/-.2em 0 0; /*valeur pour MSIE 6*/
}
/* fin - IE_Mac reprend sa lecture*/
Ces techniques exploitent des bugs de MSIE ou l'absence d'interprétation de html>. Elle permettent de régler la plupart des problèmes d'affichage si vous utilisez le Mode "Standard Compliant".
MSIE 7 bouleverse les choses car il lit html > body, body > element, head:first-child + body et n'applique plus le "star hack" (* html) en mode "Standard Compliant".
Utiliser des commentaires conditionnels pour les différentes versions de MSIE devient parfois l'option la plus raisonnable.
Comment remplacer les hacks de cette page par des commentaires conditionnels.