PNG semi transparent sous IE 6

14/11/2008

Quel monteur HTML n’a jamais eut cette problématique ? devoir intégrer un div ayant un background transparent qui fonctionne sous IE 5.5 minimum ! Heureusement, une solution existe, et elle fonctionne quasi parfaitement. Elle n’utilise pas le pngfix qui bave bien trop souvent, et sons paramétrage est simple comme bonjour.

Il suffit d’aller sur la page http://www.twinhelix.com/css/iepngfix/ où deux version existent. Pour la peine, j’utilise la version beta 2.0 qui se trouve ici: http://www.twinhelix.com/test/iepngfix.zip. Il suffit de dézipper le contenu et de placer iepngfix.htc et blank.gif dans un répertoire attitré. Pour vous simplifier la vie, mettez les deux fichiers au même endroit.

Reste à ajouter une seule et unique ligne dans votre CSS, par exemple pour que le fix gère les images (png) et les div (ayant un background png semi transparent): img, div { behavior: url(répertoire/où/se/trouve/iepngfix.htc) } Et voilà ! C’est tout… Maintenant, imaginons une feuille de style qui utilise ce code: ` body { /fond.jpg est une image normal/ background-image: url(images/fond.jpg); }

div.semitransp { /Cette classe utilise un png semi transparent en fond, il faut donc voir le fond.jpg par transparence… le fix va le gérer/ background-image: url(images/semtransp.png); }

`

Par miracle, ça fonctionne. Et c’est très joli, à vous de l’utiliser pour vous faire (enfin!) des designs qui puissent utiliser des png sans vous poser la question “arrggg mais comment je vais gérer ça sous IE 6 ???”

Ça peut vous intéresser aussi


Encore une bourde avec IE

Encore une fois, internet explorer 7 m’en fait voir ...


Nouveau design de blog

Et voilà, j’ai hésité à le mettre… mais je ...


Le modèle CSS3 flex-box

Que ce soit sur téléphone, tablette ou bureau, un des ...


CSS 3 et tant pis pour les autres

Un truc me titillent les neurones depuis quelques temps, et ...

Merci de m'aider à financer mes services

Si vous avez apprécié cet article, je vous serai reconnaissant de m'aider à me payer une petite bière :)

Si vous voulez en savoir plus sur l'utilisation de flattr sur mon blog, lisez cette page: Ayez pitié de moi

Commentaires

Ajouter un commentaire

Ajouter un commentaire

(*) Votre e-mail ne sera ni revendu, ni rendu public, ni utilisé pour vous proposer des mails commerciaux. Il n'est utilisé que pour vous contacter en cas de souci avec le contenu du commentaire, ou pour vous prévenir d'un nouveau commentaire si vous avez coché la case prévue à cet effet.