Ce site web pour être plus beau nécessite (pour le moment) un navigateur alternatif comme Firefox, Opera ou Safari (pour ne citer qu'eux).

PNG et Internet Explorer 6

11 Juin 2008
à 13:38
Intégrer une image transparente de type PNG posera toujours problème.
Certains passeront par un hack Javascript (lien fourni par Damien, un Dalien quoi), j'ai choisi pour ma part d'utiliser un hack CSS.
Par exemple, voici comment mettre un PNG comme background pour un lien : 
a.some-link {
    display: block;
    width: 300px;
    height: 80px;
    background-repeat: no-repeat;
}

/* style interprété par la plupart des navigateurs sauf IE < 7  */
*> a.some-link {
    background: url(/include/style/v1/a.bg.png);
}

/* Hack IE 6 */
a.some-link {
    !filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='/include/style/v1/a.bg.png', sizingMethod='crop');
}
Par contre il est nécessaire de préciser la taille de l'élément (hauteur et largeur).
De temps en temps, il se peut qu'il faille utiliser la valeur 'crop' à la place de 'scale', voir ne pas préciser l'attribut 'sizingMethod' du tout.

Et voilà :

Commentaires

#1 Posté par Damien, le 11 juin 2008 à 17:10
En javascript sinon, y'a PNG-Hack :
http://png-hack.googlecode.com
#2 Posté par Giz404, le 11 juin 2008 à 17:17
L'autre alternative est de ne pas supporter IE6. Malheureusement pas toujours évident, mais tellement moins prise de tête.
#3 Posté par Gameplayer, le 11 juin 2008 à 19:26
Les hacks CSS cémal !

Les commentaires conditionnels, Cémieux !


La CSS pour les autres navigateurs
#4 Posté par Xuxu, le 11 juin 2008 à 21:41
@giz404
Si encore on pouvait gérer le parc machines de tout le monde ^^.

@Gameplayer
http://forum.alsacreations.com/topic-4-2 ...
#5 Posté par Cap°, le 13 juin 2008 à 00:04
Merci pour l'info. Je m'envais tester la chose dès maintenant !!!

Personnellement cela ne me gène pas trop de poser un hack dans mon css. Du moment que cela fonctionne bien et totalement transparant pour l'utilisateur, ben moi cela me va ....
#6 Posté par Yves, le 13 juin 2008 à 11:54
Rappelons que CSS est destiné à gérer la mise en page graphique, décorative et non les contenus.
Hors dans ton cas, ton image comporte une information textuelle, qui n'a donc pas lieu d'être créé en CSS.

De plus ce hack est très limité car il ne gère pas les propriétés CSS 2.1 de background.

Je t'invite à jeter un oeil au projet PNGHack dont l'objectif est d'intégrer PNG sans soucis dans IE 6 ;)

http://png-hack.googlecode.com

Laisser un commentaire

:):(;-):D:p:x:o|(B):~:|:lol::mdr::red::roll::whis:

ou sinon comme je suis sûr de moi