Compatibilité IE 5 et 5.5
filtres/hacks


Quelques modifications sont nécessaires pour que le menu1 de gauche s'affiche mieux avec IE 5 et IE 5.5 :

Il nous faut toujours deux feuilles de style :
pagecss2nn4.css contenant les règles qui sont ignorées ou correctement interprétées par nn4.
pagecss2.css avec les nouvelles règles et ce qui pose problème.
Quelques filtres ou "hacks" vont permettre la compatibilité.
On ajoute (mais en fait on modifie plutôt pagecss2nn4.css)

<link rel="stylesheet" href="pagecss2nn4.css" type="text/css" />
<style type="text/css">
<!--
/*<![CDATA[*/
   /*n'est pas interprété par nn4 ou ie4*/
@import "pagecss2.css";/*écrase les styles précédemment définis*/
/*modifications à apporter mais plutôt dans pagecss2nn4*/
#menugauche li{
margin-top:0;
border-bottom:0;
border-top:1px solid #90BADE;
margin-bottom:-5px;
border-bottom/*ignoré par IE5.0/Win à partir d'ici*/:1px solid #90BADE;
margin-bottom:-1px;
}
/*3 solutions pour régler la largeur du menu*/
/*solution  1*/
#menugauche li a{
width:155px;
w\idth:135px;/*ignoré par IE5,IE5.5/Win et Konqueror ->3.2 !*/
}
html>body #menugauche li a{
width:135px;/*lu par Konqueror, ignoré par MSIE*/
}
/*solution 2 :
   on ne redéfinit la règle que pour MSIE*/
* html #menugauche li a{
width:155px;/*ou width:100%;*/
w\idth:135px;/*ne sera lu que par MSIE 6*/
}
/* solution 3
   des commentaires conditionnels  */

/*]]>*/
-->
</style>

Il n'y aura donc pas de changement pour les autres navigateurs.

Un titre pour un tableau avec trois colonnes

Gauche

Centre

Droite

Le texte disparaît

s'il dépasse

les possibilités de l'écran

afin de conserver

l'alignement.

 

 

 

 

Un titre pour un tableau avec deux colonnes

Colonne de gauche large

colonne étroite

texte centré

caractères gras

 

 

Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.

CSS uniquement, pas de tableau ni javascript.
Les utilisateurs de MSIE 5 ou 5.5 sont de moins en moins nombreux mais assez pour qu'un test de compatibilité s'impose.

MSIE 7 risque de bouleverser les choses car il devrait lire html > body, body > element, head:first-child + body et ne plus lire le "star hack" (* html).
Si cela se confirme, utiliser des commentaires conditionnels pour les différentes versions de MSIE deviendra l'option la plus raisonnable.

1 CSS cutting edge propose d'autres solutions sans liste pour des menus horizontaux et verticaux.
1 Autres solutions pour des menus horizontaux et verticaux.