Ie7 hack der ou comment obtenir une charte graphique adaptée à Firefox, Ie7 et Safari !

C'est maintenant le 3e billet que je rédige sur le problème que peut poser ce satané Internet Explorer 7. En effet pour la réalisation d'un site sur lequel je travaille actuellement je dois m'assurer du bon fonctionnement du site sur Safari (hé oui parfois nos clients ne disposent que de ça, même si on peut leur signaler qu'existent de très bons logiciels opensource comme Firefox) ...

Hier soir un soucis important apparaissait à cause de la balise !important! ...

Mon premier billet concernant les hacks de Internet Explorer datait de Février mais suite à une mise à jour du logiciel il m'a fallu trouver autre chose, le second billet portait sur l'utilisation de la balise !important! en lieu et place de la balise !important ...
Làs cette balise est aussi prise en compte par Safari (qui respecte plus les règles qu'Internet Explorer 7) et le rendu de positionnement de mes liens posait problème (voir la capture d'écran ci-dessous) :
Les zones cliquables (ici avec la bordure noire) sont positionnées par le biais de d'un margin-left: qui se positionne à 126px du bord pour Firefox et Safari mais qui doit être à 20px pour Ie7 ... Si j'utilise la balise !important! le positionnement est bon pour Ie7 mais plus pour Safari !

Une feuille de style uniquement pour Ie7

En recherchant un petit peu je suis tombé sur ces 2 articles: Les syntaxes de commentaires conditionnels pour IE Windows et aussi celui ci du journal des développeurs ...
Il est bien précisé dans le premier article qu'il ne s'agit pas de revenir à une discrimination systématique des styles CSS selon le navigateur, ce qui ferait perdre en grande partie l'un des atouts de la conformité aux standards, c'est à dire l'interopérabilité d'un même style pour tous les navigateurs et les économies ainsi réalisées mais bien d'une astuce permettant de créer une conformité visuelle de la charte graphique.
On va donc utiliser la possibilité d'imposer une feuille de style spécifique à Ie7 (et à lui seul) par le biais de l'appel suivant :
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
Feuille de style sur laquelle j'apporte donc les bonnes "distances" par le biais de la balise !important! ... et voilà le tour est joué !

Et pour Ie6 qu'est ce que ça donne ?

En faisant cette manipulation je me doutait qu'il y allait y avoir un bug avec Ie6 ... C'est bien le cas ! Il va donc falloir ajouter à nouveau une spécification de feuille de style particulière (seulement pour Ie6 donc) et dans cette nouvelle feuille de style utiliser le hack !important.
Beaucoup de manipulations quand même pour un rendu assez simple, non ?