Affichage des .png transparentes sous IE (background-image)

Je cherche (en vain) une solution pour que IE affiche correctement la transparence des images .png utilisées avec la propriété background-image.
pas de prob évidement avec le renard !
il semblerai que certaines png transparentes s'affichent malgré tout correctement avec les deux navigateurs (ie firefox), mais celles que je crée avec photoshop apparaissent avec un fond grisé sous IE.
(les propriétés filter pour IE ne peuvent êtres utilisé si l'image est inscruté en background ?? )

démonstration : voir les empreintes de chats dans le sidebar de mon site ci-dessous
quelqu'un sait il où piocher les infos ?
merci

IE ne supporte PAS DU TOUT la transparence alpha des PNG.
Ce qu'IE supporte, c'est la transparence totale comme sur un GIF.

Y a une bidouille avec je sais plus trop quoi, *.htc ou qqchose du genre, google et png htc te donnera peut être plus d'info. Mais IE et le PNG c'est pas copain.

Olivier a écrit :
Mais IE et le PNG c'est pas copain.

et c'est dommage, pasque png, il lui a rien fait, d'abord



robby, va voir un peu de ce côté : Dean Edward's IE 7
Modifié par Lisarael (30 Apr 2005 - 14:31)

Lisarael a écrit :

robby, va voir un peu de ce côté : Dean Edward's IE 7

Je crois que le truc du htc c'est moins violent que IE7 nan ? A moins que ça soit lié ?

j'ai souvenir effectivement d'une histoire de couche alpha avec les png
ce qui est bizarre c'est que :
les flêches blues à gauche de chaque titre d'article sont des png transparentes et s'affichent correctement sous IE, alors que ca marche pas avec les empreintes de chat


le truc avec .htc se trouve là :
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
il faut que j'étudie le truc, qui me paraît un peu compliqué
Modifié par robby (30 Jan 2006 - 21:29)

Jamais essayé (je suis sous FireFox donc m'en fous ! )mais il y a un script javascprit qui est censé rendre la chose possible. Le script foncitonne tout seul, il suffit de le déclarer dans l'entête de la page html.

<script language="JavaScript">
function IE_CorrectAlpha_PNG(){
for(i=0; i<document.images.length; i++){
img    = document.images[i];
imgExt  = img.src.substring(img.src.length-3, img.src.length);
imgExt  = imgExt.toUpperCase();
if (imgExt == "PNG"){
imgID    = (img.id) ? "id='" + img.id + "' " : "";
imgClass= (img.className) ? "class='" + img.className + "' " : "";
imgTitle= (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
imgStyle= "display:inline-block;" + img.style.cssText;
if (img.align == "left") { imgStyle = "float:left;"  + imgStyle; } else if (img.align == "right"){ imgStyle = "float:right;" + imgStyle; }
if (img.parentElement.href)   { imgStyle = "cursor:hand;" + imgStyle; }       
strNewHTML    = '<span '+imgID+imgClass+imgTitle+' style="width:'+img.width+'px; height:'+img.height+'px;'+imgStyle+';'+'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\', sizingMethod=\'scale\');"></span>';
img.outerHTML = strNewHTML;
i = i-1;
}}}
window.attachEvent("onload", IE_CorrectAlpha_PNG);
</script> 

[/i]

Chopé sur ce forum où il y a un exemple.
Modifié par Abo (30 Apr 2005 - 22:21)

bonjour,

a écrit :
le truc avec .htc se trouve là :

il fautque j'étudie le truc, qui me paraît un peu compliqué

Et surtout ça marche très mal... Les images doivent être dans le dossier de la page, ça ne resous le problème que pour les <img> et en plus ça en marche pas pareil sur toutes les machines.
Modifié par ilsandor (01 May 2005 - 10:55)

Soit je suis vraiment mauvais...ce qui est fort probable...
Soit la modification du script http://homepage.ntlworld.com/bobosola/pngtestfixed.htm
apporté par fobia et que nous redonne abo..ne fonctionne pas mieux sur les backgrounds.

Mes tests

J'espère sincèrement que quelqu'un va me pointer du doigt l'erreur que comme un boulet j'ai du faire...car ca fait un moment que je planche sur ce pb et je ne vois pas de solutions...

Ceci à l'air vraiment prometteur
Mais je l'ai testé ici mais bon... ce n'est pas encore ca...

A priori ceci fonctionne :
http://leon.vicnet.net.au/alfabeta/

Test 4

Maintenant je suis en train de ramer..(comme un bon débutant que je suis) pour faire fonctionner ceci dans
css:

#mondiv{
}

xhmtl:

<div id="mondiv"><div>

Modifié par ziad270 (04 May 2005 - 16:14)

http://www.skyzyx.com/scripts/sleight.php

Regarde et test celà Robby !! Ca marche impeccable pour moi.
FIESTA !!! J'en pouvais plus !!!
Le coup du alphaloader microsoft me plaisait moyen

La c'est simple: deux js en head et zou...tu oublies tout...

Ziad O'Hanlon

EDIT: Cf remarque/exemple de Cariboost....Ne fonctionne pas vraiment car le repeat en X ou Y ou les deux pose problème. Celà dit vous pouvez l'utiliser pour:
un repeat X sur un png avec une largeur de 1px
ou
un repeat-Y sur un png avec une hauteur de 1px
Il n'y a pas de repeat...mais le scale donne strictement le même résultat (même si intellectuellement...c'est très frustrant de ce dire que c'est une image étirée par IE et non un vrai repeat...mais perso je ne m'en étais pas aperçu avant la remarque de Cariboost)
Modifié par ziad270 (16 Jun 2005 - 14:46)