PNG, IE, et mon site ne font pas bon ménage

Attention: Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.

Warning: The information you are reading may be obsolete, this post was published more than 2 years ago.

Attention : une mise à jour de cet article a était publié, le 19 Décembre 2007, avec l’explication complète du bug.

I.Le constat

Pendant la mise à jour de mon site j’ai changé le logo de mon site et comme, je suis pas très futé; je suis allé sur le net pour trouver de l’inspiration et des tutoriaux pour créer mon nouveau logo. Au momment de sauver mon nouveau logo, Photoshop m’a proposé 3 types de fichier : GIF ,JPEG et PNG. Suivant les recommendations sur le type de fichier à choisir j’ai sauvé mon logo en PNG. Le résultat fut alors assez étrange dans le navigateur que tous le monde adore, Internet Explorer et ce, quelque soit la version.

Internet Explorer

Dans les autres navigateurs

la couleur de l’arrière plan diffère légèrement de la couleur de fond du logo Dans les autres navigateur, on observe aucune différence entre arrière plan et la couleur de fond du logo

II.L’explication

Après moultes investigations sur le net. Je retombais toujours sur le même problème de transparence de PNG sous IE6. Mais bon là, le problème est le même sous IE7 et ce bug est censé être résolu pour les PNG, de plus il n’y a pas de transparence dans mon logo!!!Une piste serait de dire que Trident a encore des problème avec le PNG, bug qui ne se limite pas au traitement de la transparence.. à moins que cela soit liés mais je vois pas comment. Bref en attendant, je n’ai pas d’explication solide et comme je suis pas graphiste, je ne peux que constater.

III.La solution

En attendant une explication à ce phénomène, j’utilise une expression conditionnel sous IE pour ajuster la couleur de mon arrière plan à la nouvelle couleur de fond de mon image. En espérant que IE 8 règle ce problème une bonne fois pour toute.

<!--[if IE lt 8]><style type="text/css" media="screen">#header { background-color:#FFE295; }</style><![endif]-->

Le côté intéressant de cette histoire c’est que j’ai trouvé une nouvelle utilisation pour l’IE Developper Toolbar, qui m’aide maintenant à déterminer la couleur exact de l’arrière plan de mon image sous IE et ensuite à ajuster la couleur de fond de mon entête comme indiqué ci-dessus.

3 thoughts on “PNG, IE, et mon site ne font pas bon ménage

  1. Confronté au même probleme je suis tombé sur une solution sur le net qui fonctionne trés bien :

    “La solution est de supprimer le gama de l’image PNG.
    Pour cela il suffit de télécharger le logiciel tweakPNG et d’y ouvrir votre image, sélectionnez ensuite la ligne gama et supprimer la.
    Enregistrer votre image et désormais IE devrait gérer correctement les couleurs de votre PNG.

    voila je confirme ça fonctionne ^^

    le petit soft se trouve ici : http://entropymine.com/jason/tweakpng/

    courage un jour IE sera un navigateur correct

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.