[Résolu] IE <7 et PNG transparent, encore...

[nico@nc]

Bonjour,

Encore une histoire de png avec IE...

Mon problème : J'ai le titre de mon site sous forme d'un png transparent, et bien sûr, les versions d'IE inférieures à la 7 me massacrent ça.

J'ai donc essayé la solution consistant à ajouter dans le CSS :

Code : Tout sélectionner

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/image.png');

Et pour qu'IE n'affiche pas l'image, un background-image: none; mais du coup Fx ne l'affiche plus ! Et ce n'est pas mieux du côté de IE !
Si je ne met pas ça, IE affiche l'image normale, donc ce n'est pas bon.

J'ai aussi tenté ce qui est indiqué ici :

/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(/75p_honey.png);
}

Mais encore une fois, pas d'image ni avec Fx ni avec IE...

Le site en question : http://www.tpe-nc.fr.nf/
L'image : http://www.tpe-nc.fr.nf/images/title.png
La feuille de style : http://www.tpe-nc.fr.nf/images/stylevert.css (c'est dans h1#header a)


Voilà, si vous avez des idées, merci d'avance !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firefox/2.0.0.2

[martin]

Voilà, si vous avez des idées, merci d'avance !

personnellement je crois que je prendrai direct la solution IE7 de Dean Edwards, en utilisant que le module sur la transparence PNG :
http://dean.edwards.name/IE7/usage/
http://dean.edwards.name/IE7/usage/configure.html

Néanmoins sous mon IE6, ton png est correctement modifié

[nico@nc]

Néanmoins sous mon IE6, ton png est correctement modifié

Ah bon ? Chez moi il n'apparait pas (je vérifierai demain sur un windozz si c'est différent) :

personnellement je crois que je prendrai direct la solution IE7 de Dean Edwards, en utilisant que le module sur la transparence PNG :
http://dean.edwards.name/IE7/usage/
http://dean.edwards.name/IE7/usage/configure.html

Je n'avais pas trouvé ça lors de mes recherches (ou alors je suis passé sans trop regarder ce que c'est...), mais ça à l'air bien, je regarderai + en détails demain.

Merci !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firefox/2.0.0.2

[calimo]

Néanmoins sous mon IE6, ton png est correctement modifié

Ah bon ? Chez moi il n'apparait pas (je vérifierai demain sur un windozz si c'est différent)

Je dirais que c'est un IE6 sp1 sous Linux… non ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firesalamandre Firefox/2.0.0.2

[nico@nc, cookies mangés]

Néanmoins sous mon IE6, ton png est correctement modifié

Ah bon ? Chez moi il n'apparait pas (je vérifierai demain sur un windozz si c'est différent)

Je dirais que c'est un IE6 sp1 sous Linux… non ?

En effet...


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)

[nico@nc, cookies mangés]

...voire avec 5.5 SP1

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)

[Benoit]

Il est bien possible que les filtres DirectX ne fonctionnent pas dans l'émulation Linux. À mon avis tu ferais mieux d'utiliser un VMWare ou quelque chose de ce genre.

[nico@nc]

En effet, ça fonctionne bien dans IE... je vais donc garder ce système.

Et je n'ai plus qu'à régler un petit problème dans le livre d'or (lié à un conflit de css) et ça passera enfin correctement sur IE ! (il manque un smiley "désespéré"..)

Merci de votre aide !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firefox/2.0.0.2

[myahoo]

Effectivement, il y a quelques babioles spécifiées comme étant non-conformes... mais on sait pourquoi :
http://jigsaw.w3.org/css-validator/vali ... ssite.html

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

[nico@nc, cookies mangés]

Ben c'est soit une CSS 100% valide, soit une bonne compatibilité avec l'autre truc... ou alors une solution + compliqué... je regarderai ce week-end si j'en ai le temps !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firefox/2.0.0.2

[nico@nc]

Rah ! Je suis bête des fois...

En fait, le

Code : Tout sélectionner

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/image.png');

ne faisait strictement rien car comme je le disait au début, IE devrait afficher en priorité l'image définie en background, et le filtre ne sert à rien.**

En fait, c'est le résultat d'une précédente expérience (que je pensait encore une fois inefficace) qui est resté dans le index.html (maintenant index.php*) :

Code : Tout sélectionner

<!--[if IE]>
	<style type="text/css">
		h1#header a {
			background: none;
			filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/title.png',sizingMethod='scale');
		}   
	</style> 
<![endif]-->

Et c'est donc ça qui fonctionne !


* Je me suis mis au php... c'est vraiment génial ce truc ! (et encore, pour l'instant je ne l'utilise pas énormément...)
** Je me souvient de m'être fait la remarque hier que c'était crosoft*** que je n'aie pas à préciser l'adresse de l'image (et pourtant avec un src...)
***crosoft : bizarre, anormal, qui buggue.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firefox/2.0.0.2

[TheRealSpaceFrog]

Faire focntionner le filtre directeX ne pose pas encore trop de souci, là ou je coince c'est pour conserver un map événtuel sur l'image...

le script ajoutant un div ou un span avec un background du coup le map ne répond plaus

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

[nico@nc]

[Note/update pour ceux qui cherchent des infos sur ce sujet]

Pour un nouveau site, j'ai voulu tester la solution IE7 de Dean Edwards, mais elle a un gros inconvénient : on ne peut pas utiliser background-position, et surtout background-repeat avec.

Donc retour au

Code : Tout sélectionner

background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png',sizingMethod='scale');

Je donne au passage l'adresse d'un site qui peut beaucoup aider : IE NetRenderer, pour avoir une capture instantanée (contrairement à BrowserShots) d'une page, sous IE 7/6/5.5.