Je viens de mettre à jour le design de mon site, et j’en ai profité pour le rendre homogène. La seule différence étant que pour la partie blog, j’ai ajouté une image en arrière plan. Et comme j’aime me faire plaisir j’ai voulu la faire ressortir via transparence à travers les textes et contenus média de mon blog. Voici en quelques sortes le résultat de mes investigations en utilisant les Big4. lire la suite →
Articles taggés par transparence
PNG, IE, et mon site ne font pas bon ménage
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.