Je vous ai parlé d’un plugin jQuery qui permettait aux utilisateurs qui utilise (encore) cette version 6 d’Internet Explorer de télécharger la dernière version de ce navigateur.

Aujourd’hui c’est d’un correcteur en ligne : IE6 CSS Fixer.

Son utilisation :

Vous lui soumettez votre code CSS et hop, il vous renvoi ce même code mais implémenter de quelques correctifs adapter à IE6.

3 moyens pour soumettre votre fichier :

• l’URL de votre feuille de style,
• upload de celui-ci,
• ou encore un copier-coller du code.

Lien :

• IE6 CSS Fixer: starter kit

Internet Explorer 6

Malgré des chiffres d’utilisation en baisse, cette version 6 est encore présente à un peu plus de 10%.

IE6 Update est un script utilisant jQuery qui va créer en haut du navigateur une barre qui va notifier à son utilisateur qu’il existe d’autres versions. Et cela uniquement si celui-ci est IE6

Le code est disponible sur le site officiel.

Lien :

• IE6 Update

#element {position:fixed;top:0;left:0}

Et là encore, problème avec Internet Explorer puisque position:fixed… connais pas !

La solution consiste à utiliser un position:absolute et à calculer notre propriété top.

Calculer ? Comment cà calculer ?

Et oui car une chose que comprend Internet Explorer c’est la ligne suivante :

#element {position:absolute;left:0;top:expression(documentElement.scrollTop + body.scrollTop)}

expression() peut en effet contenir du jscript et donc ici permettre un recalcule automatique à chaque détection de scrool.

Et voila ! Notre bloc #element est maintenant fixé sur notre page web.

Pour éviter un désagrément visuel (un effet saccadé lors du scrool), la ligne suivante est cependant nécessaire :

background:url(null) fixed;

A vous maintenant de mettre ce code spécifique dans une feuille réservée à IE

Pour contourner ce problème l’une des solutions est de passé par un fichier contenant pour faire simple une sorte de code javascript et qui portant l’extension .htc (pour HTML Components).

Vous trouverez par la suite le lien pour télécharger ce fichier mais commençons par la mise en place de cette solution.

L’appel à ce fichier se fait via la propriété CSS behaviour comme ceci :

#element {behavior:url(mon_fichier_htc.htc)}

Voici comment je procède en ce qui concerne les images PNG (car ces fichiers htc peuvent servir à d’autres choses…).

Dans la partie head, je rajoute une feuille de style rien que pour Internet Explorer

<!--[if IE]><link href="styles/ie.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

Sur tous mes éléments étant ou contenant une image PNG, je rajoute la class png

<!-- une image png -->
<img src="images/mon_image.png" alt="Mon image PNG" />

<!-- un bloc ayant une image png en background -->
<div class="png"></png>

Et dans la feuille de style ie.css, je précise le chemin vers mon fichier htc :

.png {behavior:url(scripts/iepngfix.htc)}

Remarques :

• le chemin vers le fichier htc se fait non pas depuis votre fichier CSS mais depuis la page appelante,
• une image blank.gif est nécessaire (celle-ci est fourni dans avec le fichier iepngfix.htc). Le chemin vers celle-ci est à préciser dans le fichier iepngfix.htc

Il vous reste à télécharger le fichier htc

Lien :

• iepngfix chez twinhelix.com