Transparence et IE

Bonjour,

Je suis confrontée au problème de la transparence avec IE. j'ai sur ma page des images en png avec des motifs sur un fond transparent (opacité très faible). J'ai trouvé des solutions proposées sur le forum.
Par exemple sur une des div, j'ai dans ma feuille css générale:

#logo {
height:95px;
text-align:center;
}

Puis j'ai créée une feuille css spéciale pour IE6:

#logo {
height:95px;
text-align:center;
zoom: 1; 
background: none; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo10.png", sizingMethod="image");
} 

Sur la page html, j'ai ceci:

	<style type="text/css" media="all">@import "memoire.css";</style>
<!--[if  IE 6]>
 <style type="text/css"> @import "memoireie6.css"; </style>
	<![endif]--> 

Mais cela ne marche pas. L'image s'affiche avec un fond gris ans transparence. Il doit y avoir une erreur. Quelqu'un pourrait-il m'aider à corriger?
Merci
Modifié par Lamx (22 Sep 2008 - 15:08)

Bonjour,

Essaie peut-être avec :

... sizingMethod='[b]crop[/b] ...

Tu peux également t'assurer que ton image est bien dans le même répertoire que ta page html.
Modifié par mecho (22 Sep 2008 - 15:57)

Merci pour la réponse rapide. mais en essayant crop cela ne change rien. Quand à l'image elle et dans le même dossier que la page html et les 2 css.
Donc je suis toujours avec mes vilains fonds gris sur IE6, avec IE 7, c'est ok.

Bonjour,

<style type="text/css" media="all">@import "memoire.css";</style>

Cette syntaxe spécifique c'est pour que la feuille de style ne soit pas lue par IE5.0 Windows et Mac

<!--[if  IE 6]>
<style type="text/css"> @import "memoireie6.css"; </style>
<![endif]-->

Et celle là je ne suis pas sur qu'elle soit utile en plus il y a un espace en trop entre le if et IE.

Pourquoi ne pas mettre tous simplement :

<!--[if lte IE 6]>

<link rel="stylesheet" href="memoireie6.css" type="text/css" media="screen" />

<![endif]-->

Les commentaires conditionnels dans la F.A.Q

ou alors

Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows
Modifié par knarf (22 Sep 2008 - 22:27)

knarf: bah, vu les parts de marché d'IE5 viser uniquement IE6 et pas lte IE 6 ça ne change pas grand chose, voire rien. Surtout si on n'assure pas la compatibilité IE 5.x par des tests au cours du projet...

Lamx: je vois plusieurs problèmes avec le code CSS que tu indiques, notamment:
1. Tu n'as pas d'image de fond pour #logo dans ta feuille de styles générale. Quelle image de fond essayes-tu donc de remplacer par un filtre AlphaImageLoader pour IE6?
2. Dans ta feuille de styles memoireie6.css, tu répètes des styles déjà présents dans memoire.css. C'est une erreur: la feuille de styles pour IE6 ne doit contenir que des correctifs qui se rajoutent aux styles normaux, ou qui éventuellement les contredisent.

a écrit :
knarf: bah, vu les parts de marché d'IE5 viser uniquement IE6 et pas lte IE 6 ça ne change pas grand chose, voire rien. Surtout si on n'assure pas la compatibilité IE 5.x par des tests au cours du projet...

Oui c'est vrai if IE6 est suffisant

En fait en relisant la FAQ ton lien sur @import et celui de blog and blues je me suis aperçu que la syntaxe de lamx semblait bonne. Ce doit être le commentaire conditionnel et le fait que cela ne fontionne pas qui m'ont enduit plein d'erreurs .

EDIT :
Heuuu comme c'est un logo et comme le fait remarquer Florent rien dans la css le concerne, l'image ne serait pas en dure dans le code html par hasard ?
Modifié par knarf (23 Sep 2008 - 06:20)

Effectivement j'ai laissé tombé IE5 vu qu'il n'est plus beaucoup utilisé et j'ai déjà bien du mal avec IE6 pour l'éradication duquel je prie.

Pour répondre à Florent, j'ai corrigé ma feuille css pour IE6 en la réduisant aux modifications. En fait j'avais mis l'intégral de la mise en forme de la page dessus.
D'autre part l'image de fond se trouve sur le body, c'est un motif répété pour faire une sorte de papier peint sur toute la page:

body {
 font: 11px verdana, sans-serif;
 background: #AFA99B url("teku8_pp2.jpg") top left repeat;
 margin: 0;
 padding: 0;
}

L'idée est que les images avec transparence laissent apparaitre le papier peint.

a écrit :
l'image ne serait pas en dure dans le code html par hasard ?

Par contre je ne comprends pas ce que veut dire "en dure".

Je suis toujours en carafe pour les transparences sur IE6 mais je commence à croire qu'il n'y a pas de solution pour ce que je veux faire.

Ie6 ne gere pas la transparence cela va etre diifficile de faire ce que tu veux.

Lamx a écrit :
je commence à croire qu'il n'y a pas de solution pour ce que je veux faire.

Pour l'instant, tu n'as pas montré précisément:
1. ce que tu souhaites faire;
2. ce que tu as tenté pour le faire.

Notamment, on n'a toujours pas vu la page en ligne ou le code HTML de cet en-tête. Difficile de te conseiller correctement dans ce cas...

greg12 a écrit :
Ie6 ne gere pas la transparence cela va etre diifficile de faire ce que tu veux.

IE6 ne la gère pas nativement. Il propose toutefois une gestion de la transparence, via des filtres DirectX qui peuvent être appelés depuis le CSS (avec la propriété non standard filter). C'est limité et pas toujours évident à mettre en place, mais ça peut être une possibilité.
Modifié par Florent V. (25 Sep 2008 - 17:32)

Voici l'adresse de la page test dont je n'arrive pas régler les problèmes de transparence avec IE. Après avoir cherché, je pense mal me servir du filtre mais je n'arrive pas à trouver la bonne solution, si elle existe:
http://pagesperso-orange.fr/larmandie/teku11/memoire11.html

Merci pour les conseils

Personne pour me renseigner??

Bonjour,

Je cite la FAQ:

a écrit :
Tout d'abord, il faut bien noter que le filtre AlphaImageLoader ne substitue pas une image (avec transparence PNG activée) à l'image de fond d'un bloc. L'image placée en «fond» du bloc (en fait entre le fond et le contenu) n'est pas une image de fond à proprement parler, et on ne pourra pas utiliser les propriétés CSS pour les images de fond.

Le filtre AlphaImageLoader permet donc d'afficher une couche graphique entre le fond et le contenu. Donc dans ton cas, pour IE6, tu as un bloc #logo qui affiche:
1. une couche graphique translucide avec un filtre DirectX AlphaImageLoader;
2. une image en PNG-32 par dessus (contenu du bloc).

Donc ce que tu vois c'est ton image dans le contenu HTML. Rappelons que le filtre AlphaImageLoader ne permet PAS d'obtenir un support de la transparence PNG-32 dans IE6 ni pour les images de contenu (élément IMG en HTML) ni pour les images de fond (background en CSS). La solution pour obtenir ce support s'appelle IE7.

Ce que je te conseille de faire, c'est de laisser tomber le filtre AlphaImageLoader dans ce cas précis, et d'enregistrer ton image de fond avec une couleur de fond par défaut blanche pour obtenir, dans IE6 uniquement, un logo opaque blanc et non pas un logo opaque gris. Ça s'appelle de la dégradation gracieuse, et ça se justifie parfaitement avec un IE6 qui recoupe entre 20 et 25% des utilisateurs (et, bien entendu, c'est amené à baisser).
Note: pour rajouter cette couleur de fond par défaut (bKGD chunk de son petit nom technique), tu peux utiliser pngcrush en ligne de commande ou bien The Gimp (la couleur de fond utilisée est alors la couleur d'arrière-plan de la boite à outils).
Modifié par Florent V. (07 Oct 2008 - 11:55)

bonjour,

En fait , je crois plutot que tu n'as pas reussi a finaliser ton code avec les infos fournie ici et dans la FAQ.

tout d'abord pour ton logo , le div qui contient l'image merite d'etre placé en margin:auto; pour se centré.

Pour les 2 autres images , elles apparaissent bien translucide , celle en bas merite un : sizingMethod="crop" .(comme dit deja plus haut).

Les png 'opaques' que tu vois , sont des balises images , en dure dans ton code , bien entendu , IE ne gere pas leur transparence et elle se superpose aux filtres . Il te faut alors , en les cibant , les mettre en display:none; dans IE6 uniquement .

par exemple :

#decohaut img , #decobas img {display:none;}
#logo {margin:auto;}

sinon , ces 2 images pourrait simplement etre de simple gif , il n'y a pas vraiment d'effet d'opacité' visibles .

par ailleurs , dans mon IE6 , ton div centre est invisible ,
teste dessus un :

zoom:1;position:relative;

++

Merci Florent pour tes conseils qui m'ont bien aidé. Cela m'oblige à renoncer à changer mon fond mais c'est plus propre.
J'ai essayé de mettre les images en display comme conseillé par gcyrrillus mais soit les images disparaissent soit elles sont mal placées, comme pour le logo. vivement que IE6 disparaissent.
En tout cas, merci