[RESOLU] Image pas transparente sous IE

Bonjour,

J'ai comme un souci avec ce site :

http://www.messources.com/

identifiant : test
mot de passe : test

Quand on arrive sur le site, on a une image avec un text "Bienvenue sur ce site". Cette image est transparent et ça marche dans tous les navigateurs, sauf... allez, je vous laisse deviner ! (IE)

Ce fond gris est blanc (donc moins visible) sur la page principale de "liens", pourtant j'avais fait les images sur le même modèle !

Moi pas pige !

Quelqu'un pourrait m'aider svp ?

Merci d'avance
Modifié par thiebo (29 Jan 2006 - 22:58)

TROUVE !!!!

merci au bouquin csszengarden : IE ne supporte pas la transparence des image .png !

J'ai donc collé l'arrière image dans l'image même des titres.

Merci à ceux qui ont regardé ma question.

il me semble qu'il y a un moyen de pallier a cette defaillance d'IE.
En cherchant bien tu devrais trouver.
PENSE A METTRE RESOLU.

Le paillatif que j'ai trouvé, c'était de mettre un fond dans mon image...
et puis j'ai réduit aussi l'image d'arrière plan.
merci en tous cas.

Explications sur le site de microsoft.
Cependant la méthode n'est pas terrible car elle oblige à rentrer directement l'image dans le code html avec une balise <img>, ce qui enlève pas mal de possibilités css.

Triton a écrit :
Explications sur le site de microsoft.
Cependant la méthode n'est pas terrible car elle oblige à rentrer directement l'image dans le code html avec une balise <img>, ce qui enlève pas mal de possibilités css.

Ben, non....
Si tu regardes bien, ils utilisent une déclaration "STYLE=...", donc c'est justement quelque chose que tu peux mettre dans un fichier css.
Seulement il faut charger un css particulier uniquement pour IE (grâce aux commentaires conditionnels), et ce fichier css "spécial IE" ne sera pas valide W3C.

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

Et ça ?
Un petit javascript (environ 20 lignes) appelé dans un commentaire conditionnel pour IE 6 et inférieur (IE 7 gèrera la transparence PNG).

Le code est dans le code source de la page dont je donne le lien.
Je recommande de le mettre dans un fichier .js séparé, et d'utiliser une balise link.

Sinon, quelqu'un sait comment on fixe une couleur d'arrière plan pour un PNG avec The Gimp ?
Modifié par mpop (12 Feb 2006 - 21:13)

Oui, je connais ce script...
C'est en fait EXACTEMENT la même méthode (utiliser la propriété Filter issue de DirectX) mais dans ce cas on change le style de l'image par javascript.

Le script en lui-même fonctionne très bien, mais je ne vois pas pourquoi je devrais priver mes visiteurs qui ont désactivé js de mes (belles) images png transparentes. Il suffit d'1 ligne de css pour faire la même chose et ça marche même avec js désactivé.

Bon, si tu as 50 images transparentes à gérer, peut-être que l'utilisation d'un script global est plus intéressante, encore que...
(note: dans le cas d'un "background-image", il faut une 2ème ligne pour "annuler" l'image initiale).

a écrit :
Il suffit d'1 ligne de css pour faire la même chose et ça marche même avec js désactivé.

J'ai pas bien saisi là ... Tu parles de quelle ligne de code ???

Pandore a écrit :
Il suffit d'1 ligne de css pour faire la même chose et ça marche même avec js désactivé.

J'ai pas bien saisi là ... Tu parles de quelle ligne de code ???
Celle-là ?

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

Modifié par mpop (13 Feb 2006 - 00:07)

"tout à fait thierry" !!

(je peux donner un exemple de code si ça vous semble pas clair... mais là, il est un peu tard pour chercher dans mes fichiers...)
Modifié par Mpok (13 Feb 2006 - 03:37)

Oui moi je veux bien, je comprend pas bien comment placer ça dans un "background" css…

Moi ce qui m'a encore plus étonné avec IE (parce que le problème de *the* transparence des png, on en entend parler partout), c'est quand j'ai découvert qu'il est défaillant même avec la transparence des gif.... pourtant c'est pas une technologie qui date de cette aprés-midi (mais bon, au moins si ça peut accelerer la disparation des gifs au profit de la monté des png )

Bonjour tous

Mpok a écrit :
"tout à fait thierry" !!

(je peux donner un exemple de code si ça vous semble pas clair... mais là, il est un peu tard pour chercher dans mes fichiers...)

............

Hé, hé...

Désolé, j'avais délaissé ce topic, pensant (à tort, visiblement) qu'en lisant "carefully" tous les posts (et les liens proposés, soit celui de Microsoft, soit celui du code javascript), cela suffirait...

Mais vu la subtilité du "Up",

griggione a écrit :


............

(qui m'a beaucoup plu... ), je me sens obligé d'être un poil plus explicite...

Alors, voilà.
Je prends l'exemple tout bête d'un logo partiellement transparent réalisé en .PNG

Le code HTML pourrait être par exemple :

<div id="logo">
 <h1>Titre</h1>
</div>

et le css correspondant :

#logo {
	width: 760px;
	height: 150px;
	background: url(logo.png) no-repeat;
}

J'ai évidemment laissé tomber les déclarations de positionnement du logo, ce n'est pas ce qui nous intéresse ici. En revanche, je crois me souvenir que les tailles de l'image doivent explicitement être fournies pour que ça marche.

A ce niveau, nous avons un beau logo transparent (avec le titre qui s'affiche par-dessus, à vous de styliser "#logo h1" pour que ça convienne à vos besoins), mais qui s'affiche avec un fond gris (ou blanc, je ne sais plus) sous IE < 7 parce que IE ne gère pas la transparence des PNG.

Nous allons donc créer un fichier css "special_ie", qui sera appelé par un commentaire conditionnel dans le code HTML, après l'appel au fichier css principal.
(rappel: Plus de Hacks dans les fichier CSS ! ) :

  <!--[if lt IE 7]>
    <link href="special_ie.css" rel="stylesheet" type="text/css" media="screen" />
  <![endif ]-->

Rappel: IE 7 gère (normalement ) la transparence des png...

Et dans ce fichier css special IE nous trouverons la ligne magique citée dans les posts précédents :

#logo {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='logo.png', sizingMethod='image');
}

Le "background-image: none" sert à virer le background défini précédemment dans le fichier css principal.

Et voilou !
Pas de javascript et ça marche !
J'ai pas fait de tests spécifiques pour IE5.0, sur le site de crosoft ils disent que ça fonctionne uniquement pour IE6.0 mais je peux vous assurer que ça fonctionne AUSSI sur IE5.5

La même technique peut être employée pour autre chose qu'un logo, un bouton par exemple, en fait pour toute image qui peut être déclarée par un background en css.

En espérant que ça aide....

Très bien sauf que le fait que l'image de fond doive avoir les mêmes dimensions que le conteneur concerné nous met dans un cas limite et limité de l'utilisation de la propriété background.

Quid de la possibilité du background-repeat ,

Et surtout quid d'une image background plus grande que le conteneur ? possibilité tellement utile pour des design s'adaptant aux redimensionnements de la fenêtre et différentes résolutions.

De plus cette idée d'un conteneur à ce point déterminé par son background devrait plutôt inciter à mettre l'image en dur dans le document.

clb56 a écrit :
Quid de la possibilité du background-repeat

Là, effectivement, no way... (à ma connaissance)

clb56 a écrit :
Et surtout quid d'une image background plus grande que le conteneur ? possibilité tellement utile pour des design s'adaptant aux redimensionnements de la fenêtre et différentes résolutions.

Le paramètre "sizingMethod" de la ligne "Filter..." peut être changé en "sizingMethod='scale'", et dans ce cas l'image est censée s'adapter en taille. Mais je n'ai pas testé ce cas...
(et je ne sais pas vraiment si ça répond à ta question)

clb56 a écrit :
De plus cette idée d'un conteneur à ce point déterminé par son background devrait plutôt inciter à mettre l'image en dur dans le document.

Tout dépend de ce que tu veux. Le but ici était d'avoir des PNG transparents sous IE<7 sans utilisation de javascript, et la méthode proposée répond parfaitement à la question, en plus le css principal est valide, seul le fichier "special_ie" pose des problèmes au validateur.
Si tu veux conserver la balise img, pas de problème, tu utilise alors soit la méthode microsoft (rajout d"un "style=" à la balise img dans le code html), soit le script javascript proposé plus haut (qui fait la même chose, sauf que ce n'est plus visible dans le code html).
Voir les posts précédents qui répondent également très bien à la question.

Ou bien, tu veux absolument avoir un html tout propre, ne pas utiliser javascript pour des problèmes d'accessibilité, et dans ce cas....
tu n'as pas de PNG transparents !