[résolu] Propriété Filter:progid PNG24 transparent sous IE

Salut à tous,

en ce moment je m'amuse à essayer les hack pour faire passer la transparence d'un PNG24 sous IE.

Je teste la methode qui utilise la propriété filter via des commentaires conditionnels.

Sur cette page de test j'y parviens, et encore, en bidouillant car si je suis à la lettre tout ce que j'ai pu trouver sur le sujet ça échoue, mais pas moyens d'y arriver sur cette page pour l'encart en bas à droite qui est une boite extensible composée de deux images (reprises dans la page de test).

Comme c'est en ligne, en attendant j'ai fait des PNG sans transparence pour IE via des commentaires conditionnels, mais j'aimerai comprendre pourquoi j'y arrive pas.

Et tout à l'heure, surprise, firefox me "jouait" plus la transparence non plus !

Je me suis rendu compte que j'avais regroupé des fonctions javascript dans un meme fichier (galerie photo d'Olivier + menu déroulant tuto d'alsa), et que j'avais des erreurs dans la console javascript de firefox sur les pages ou j'appelais ce fameux fichier alors qu'il n'y avais pas de galerie photos mais seulement le menu déroulant.

...Y avais il un rapport ? J'ai corrigé et j'appel un fichier contenant seulement le script pour le menu sur ces memes pages (où il n'y a pas de galerie photo), depuis il me l'a plus fait.

J'ai mis entre commentaire dans la feuille de style pour IE les lignes que j'essayaient pour faire passer mes PNG sous IE (pas le css de la page test, celle là), et dans la CSS "de base" je rajoutais simplement :

div#boite {
	width: 212px; 
	margin: 10px 0 0 400px;
	padding: 0px 0 17px 0;
	background:  transparent  url(./images/cadre_tele_b2.png) center bottom no-repeat ;
[b]background :none;	[/b]
}

Dans la css pour IE :

div#boite {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='./images/cadre_tele_b2.png',sizingMethod='scale')
}

Exactement comme dans ma page de test ou cela fonctionne.

Quelqu'un à une idée, une source sure ou je peux me documenter, un conseil sur ces histoires de transparences... ?

Edit : après avoir "uppé" ma page de test, je voyais bien mes deux images de la boite extensible sous ffox et IE, et là sous ffox je les vois plus , par contre mon espèce de bloc troué est toujours là

Merci !
Modifié par Hum (15 Oct 2006 - 15:27)

bonsoir,

je ne suis pas certain de bien suivre ton histire

Pour le javascript et les erreurs, ceci provient du fait que ton code essai probablement d'acceder a une balise qui n'est pas dans le html, d'ou une erreur (je pense que tu referme tes menus si javascript activé , n'estce pas ? ), a prioiri sans incidence , sauf bande passante et solicitation du navigateur pour "rien".

Autre possibilité , les 2 scripts utilise peut-etre des variables de même noms , d'où probable telescopage et script inefficace ?.

pour la transparence , avec un simple filter alpha , il suffit de reinseigner dans le cs sles attributs et valeur "proprietaire" elles ne seront reconnu que par leur navigateurs respectifs sans interference.

pour le filter prodix , il faut de preference le mettre en commentaire conditionnel (entete ou en externe) aprés avoir chargé le css commun .

et seulement la , il faut retirer l'image pour Ie en l'appliquant par le biais du filtre .

ai je repondu a tes questions ?

a écrit :
Pour le javascript et les erreurs, ceci provient du fait que ton code essai probablement d'acceder a une balise qui n'est pas dans le html

C'est précisement ça je pense, mais oublions cette histoire...

Pour le reste je pense te comprendre et je fais exactement ce que tu dis, mais sur ma page je n'y arrive pas (lien post du dessus).

Et sur ma page test (lien post du dessus), je pensais y arriver, mais sur trois images insérrés, deux ne s'affichent pas sous firefox, je dois faire quelquechose de travers....

Merci
Modifié par Hum (10 Oct 2006 - 23:09)

re

je regarde a nouveaux
dans la page :
http://lescourroiesdecarnel.free.fr/PNG_TEST/png_test.html

tu indique sur la derniere ligne : pas de fond a div#boite h2.title :

background :none;

par ailleurs entre les 2 versions , tu n'utilise pas la même image :
./images/cadre_tele_b2.png pour le filtre d'IE et ./images/cadre_tele_h2.png pur ff.

dans le second l'en dans le div#boite , tu n'applique a priori auncun filtre (ni alpha , ni prodix) pour IE, d'ou la non-transparence .

Les navigateurs , IE et ff ne fond qu'appliquer ce que tu leur demande. Un petit break avant de reprendre tes "morceau" de css et je pense que ça devrait aller, ça ressemble plus a un petit coup de fatigue .

++

Oui je me rend bien compte que ce que j'écris embrouille plus qu'autre chose.

gcyrillus a écrit :
re
par ailleurs entre les 2 versions , tu n'utilise pas la même image :
./images/cadre_tele_b2.png pour le filtre d'IE et ./images/cadre_tele_h2.png pur ff.

Oui c'est une solution de remplacement, en attendant d'avoir trouvé ce qui ne va pas.
Comme dit plus haut, là j'utilise aussi du PNG pour IE, mais ce ne sont pas les memes images (comme tu le dis) : celles ci n'ont pas de transparence, donc pas besoin de filtre :

gcyrillus a écrit :

tu n'applique a priori auncun filtre (ni alpha , ni prodix) pour IE, d'ou la non-transparence .

Donc, pour récapituler, sur cette page , en attendant de trouver le moyen d'afficher le meme PNG24 transparent dans les deux navigateurs, je fais du cas par cas en donnant un PNG24 avec transparence pour Gecko, et une autre image PNG24 sans transparence pour IE.

Et 2 images sont concernées puisque c'est "une boite extensible".

En fait mes essais de filter sont entre commentaires conditionnels juste en dessous de ça (dans la CSS pour IE).

C'est plus compréhensible ?

Bref je vais faire une page reproduisant mon problème, ce que j'aurai du faire dès le début .

Merci à toi, je prépares la page et j'"up", et je refais un post tout propre et aussi clair que je le pourrai.
...et si ça se trouve je vais y arriver d'ici là !
Modifié par Hum (11 Oct 2006 - 15:03)

Okay,

Voilà donc une page qui reprend mon problème avec le maniement du filter progid dans commentaires conditionnels pour afficher la transparence d'images en PNG24 sous IE.

J'applique donc 3 background-images en css :
- Une boite extensible qui comprend 2 images (encart à droite en bas)
- Et une image en plus pour tester. (espèce de bloc troué)

Le css ici (j'ai épuré au maximum, les déclarations en question sont à la ligne 84, div#boite, div#boite h2.title, div#toto), et je déclare les propriétés filter dans cette css pour IE:

- Sur ffox, tout s'affiche bien.
- Sur IE le bloc troué n'est pas affiché et les deux images composant l'encart s'affichent mais pas avec transparence.

Alors que avec les memes syntaxes et memes 3 images, dans ce lien:
- firefox ne m'affiche pas les background de l'encart et m'affiche le bloc troué.
- IE m'affiche toutes les images et avec transparence...

Merci d'avance
Modifié par Hum (11 Oct 2006 - 17:25)

bonsoir , en revenant sur tes pages ,

dans la premiere pages , la boite qui n'est pas transparente (dans IE) , ne l'est pas , car elle affiche aussi l'image en background en plus du filtre , tu ne peut donc avoir le resultat visuel, l'image dans le filtre se fond avec celle en background au lieu de le remplacé .

Pour la seconde image , est tu sur des chemins des source indiqué pour les images, car a l'aide du dom explorer , en reprenant le filtre et avec le chemin en absolue , cela fonctionne en ligne .


Pour la 2eme page , je maintient (pour ff) que tu enleves tes images de fond avec l'attribut background:none; , exepte dans le fond principale ou tu marque la regle precedente avec un "!important .

bonsoir

Bonsoir,

gcyrillus a écrit :
...
est tu sur des chemins des source indiqué pour les images, car a l'aide du dom explorer ...

a apriori oui, mais bon, j'y perd la boule, alors j'ai mis tous les chemins en absolu et effectivement le bloc troué s'affiche avec transparence sous IE et ffox maintenant. Premiere avancée....

gcyrillus a écrit :
...
dans la premiere pages, la boite qui n'est pas transparente (dans IE) , ne l'est pas , car elle affiche aussi l'image en background en plus du filtre ...l'image dans le filtre se fond avec celle en background au lieu de le remplacé .

Compris.
Mais pour quelle raison ?

J'ai virer les background-none de la feuille de style de base, et l'image troué s'affiche bien sous IE, je procède de la même manière pour les autres, je piges pas : leurs état n'a pas changé...


La page et ses deux css actualisés

Merci de ton aide, j'ai vraiment du mal à trouver la logique dans cette histoire...

...Pour la seconde page je verrai ensuite

bonsoir

Modifié par Hum (11 Oct 2006 - 23:02)

bonsoir,

la logique est "relativement simple et est plutot habituel.

1) mettre les png en background dans le fichiers commun.
(quand ça marche , ne plus touché ).

2) (s'occuper du cas de IE )
enlever les images de fond dans le css "special IE" et appliqué le filtre.
(en commentaires conditionnels comme tu le fait et chargé apres le css communs , sans rire , betise qui arrive parfois ).

Dans l'exemple en ligne , tu oublis d'enlevé l'image de fond pour IE.:

/*     Page inscriptions  */
div#blocinscription {  height: 396px;}

div#blocinscription p {
margin: 0 0 0 -146px;
width:280px;      
line-height: 2em;}
	  
div#boite {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://lescourroies.free.fr/images/cadre_tele_b2.png',sizingMethod='scale')
}

div#boite h2.title {   
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://lescourroies.free.fr/images/cadre_tele_h2.png',sizingMethod='scale')
}  
	
div#toto{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://lescourroies.free.fr/images/toto.png',sizingMethod='scale')
}

C'est avec les "filter que tu devrais mettre le background-image:none;
(l'un est une alternative pour l'autre).

bonsoir

Salut gcyrillus,

ok, en mettant comme tu me l'a dis

div#boite {
[b]background: none[/b]
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='http://lescourroies.free.fr/images/cadre_tele_b2.png',sizingMethod='scale')
}

dans les déclarations pour IE, tout est rentré dans l'ordre sauf...

Sur mon cas de boite extensible :

J'ai donc un background sur le div#boite devant etre "joué" en

background-position: bottom;

et l'autre background sur un h2 qui est dans le div#boite qui lui est joué en

background-position: top;

Le problème est que IE "joue" toutes les images en partant du haut (background-position: top) et me les déforme (scale ?), et la déformation de l'image est donc accentuée si on augmente la taille du texte et que la boite s'étire.


Il ajuste les images pour qu'elles prennent tout l'espace disponible dans leurs conteneur, ce qui me fait penser au :

sizingMethod='scale'

en fin de declaration.

J'ai fait quelques recheches infructueuses, voir s'il existait d'autres propriétés pour sizingMethod autre que scale.
Il me semble qu'il en existe, je croit bien en avoir vu passer.

Peut etre dois-je conclure que ces "bidouilles" sont à éviter pour les cas de "conteneur extensible graphiques".

J'ai actualisé le lien avec pour ma boite extensible , j'ai remplacé les deux images de la boite avec largeurs en hauteur peux élevées pour observer la chose au mieux.

Un grand merci pour ton aide
Modifié par Hum (12 Oct 2006 - 17:23)

bonjour,

pour le sizingmethod, il y en a 3 !

image , la balise prend la dimension de l'image (cela ne convient peut-etre pas sans devoir avoir une 3eme image pour le raccord).

crop , la balise garde sa dimension et coupe les morceau qui depasse , sans redimensionné ni l'image , ni l'objet.

et scale , qui va s'etirer ou se retrecir dans les 2 sens pour occupper tout l'espace de l'objet.

L'alternative est peut-etre de donnée une bordure jaune haute et basse a div#boite ou placé 2 images avec le sizingMethod='image ', et d'appliqué juste (ou comme 3eme image ) un png gris opaque sur l'ensemble de la boite ?

bonsoir
Modifié par gcyrillus (12 Oct 2006 - 18:36)

Excellent,

je viens d'essayer les trois valeurs successivement, apparemment c'est crop qu'il me faut mais il reste un soucis, mon background de div#boite doit etre en [i]background-position: bottom et il est "joué" en top.

Une façon de controler la position du background insérré avec filter:progid existe ?

Sinon je pense que ce doit être contournable en donnant l'image de background au dernier élément de la boite pour IE peut être...
Ce qui reviens à ce que tu me propose à la fin de ton post en alternative si j'ai bien compris ?

lien actualisé [/i]
Modifié par Hum (13 Oct 2006 - 21:45)

bonsoir ,
je ne crois pas qu'il soit possible de repositionne l'image de fond , a moins peut-etre d'associer un autre filtre. Je n'ai pas creuser cette histoire.

je vient de faire une petite page en reprenant tes images et les dernieres idée que j'avais evoqué. ...les bordures et la 3eme image

http://gcyrillus.free.fr/essai/essaie_courroie.html

l'ensemble du html et css sont sur la même page , l'image supplementaire est au même niveau que le fichier lui même si tu souhaite en faire usage.

... ah je n'ai pas encore eu l'occasion , mais ce n'est pas la premiere fois que je vais jeter un oeil a ton site par le biais de ce forum et il tres agreable.

bonsoir

Bien.

J'ai bien avancer, j'ai pris ça comme un bon entraînement car l'enjeu n'en valais pas la peine vu ce que ça m'apporte dans ce cas précis...

Pour Gecko :
J'ai donc placé une image en background sur ma div#boite qui contient "graphiquement" la bordure haute et le fond de la boite trasparent.
Et, sur un <p> que j'ai crée dans la boite qui englobe un lien, j'ai placé une image background qui contient "graphiquement" la bordure basse de la boite avec un png sans transparence, comme dans ce cas je considère que j'en ai pas eu besoin.

<constat>
Je me suis aperçu que les images insérées avec le filter:progid se trouvent toujours au dessus d'une image insérée avec la propriété background css si on donne à un même élément les deux:

div#boite {
background:url(../images/bordure_haute.png) top no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fond_et_bordure_haute.png',sizingMethod='crop' );}

Dans ce cas le fond transparent de mon image de fond insérée avec le filtre recouvre ma bordure basse insérée en background css.
</constat>

Pour IE :
J'ai fait la même chose mais le fond de div#boite est filtré.
Mais voilà ce que j'ai du faire :

div#boite { 
margin: 160px 20px 0 20px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fond.png',sizingMethod='crop' );}

div#boite p{ 
width: 212px; [b]
position: relative; 
/*  left: 70px;  */[/b]
} 

Je suis tombé dans le cas du filter qui désactive les liens (j'ai un lien dans mon div#boite p), j'ai donc appliqué une position relative et c'est rentré dans l'ordre.
Mais pourquoi mon <p> sous IE s'est il décalé d'environ 70px vers la gauche ? Je lui ai donc donné une valeur de left pour qu'il se place "là où il devrait" et ça je piges pas pourquoi...

J'ai donc actualisé mon lien de cette page et j'ai mis mon left: 70px; entre commentaires que vous puissiez voir le décalage sous IE.

Je considère ce problème résolu, un grand merci à gcyrillus qui à été super sympa.

Modifié par Hum (15 Oct 2006 - 15:26)

bonjour,

merci, a priori ton decallage vient de :

div#blocinscription p {
margin: 0 0 0 -146px;
width: 280px;      
line-height: 2em;}

la marge negative est aussi applique a ce paragraphe, , ça + le text-align:center semble t'obliger a ce decallage de 70/73px !? effets secondaire du filtre en plus , le relatif ou layout ? ...

Une remise a zero des marges sur :

div#boite p{ 
width: 212px; 
margin:0;
} 

semblerait suffire , ... je n'ai pas testé.

++

Non, je pense que tu as regardé la feuille de style du site "normal" qui est text1.css avec courroie_ie.css pour IE.

Hors cette page est un test et j'ai fais un fichier text2.css et courroie_ie2.css juste pour elle et j'ai déja fait exactement ce que tu me suggère :

div#blocinscription p{
		margin: 0 0 0 36px;
		width:300px;      
		line-height: 2em;}                      						 							   				
div#boite {  
		float: right;  
		width: 212px; 
		margin: 160px 36px 0 20px;
		padding: 0px 0 0px 0;
		background: url(./images/fond.png) top no-repeat;}

div#boite p{  
width: 212px; 
text-indent: 0;
text-align: center;
line-height: 1.5em;
margin: 0;
padding: 10px 0 10px 0px;
background: url(http://lescourroies.free.fr/images/border_basse.png) bottom no-repeat;
}

Je viens de vérifier, j'appel bien les bons css pour cette page de test avec ses css de test, je comprends pas...
Modifié par Hum (15 Oct 2006 - 16:10)

heu je crois que tu oubli ou cafouille avec les 2 fichiers css , le premier "normal" est surchargé par le second dans IE , et du coup la marge a zero , ressaute , car elle est redefinies pour le blocinscription , mais pas la boite , qui est enfant et qui en herite donc .

le RAZ est a faire dans le css pour IE aussi .

++

gcyrillus a écrit :
le premier "normal" est surchargé par le second dans IE

Mais à (ou avec quoi) quoi tu vois ça ?

Bien, je vais m'amuser à tout separer , à faire un RAZ comme tu dis.
Modifié par Hum (15 Oct 2006 - 16:34)

re bonsoir ,

les deux extraits de code que j'ai prit proviennent du css pour IE de la page
que tu as mise en lien , les regles css que tu applique a div#blocinscription p ,
s'appliquent par effet de cascade a div#boite p
tant que de nouvelles valeurs ne sont pas imposé directement a ce paragraphe.

++
Modifié par gcyrillus (15 Oct 2006 - 22:14)

Ok,

tu avais donc bien raison. (pourtant ya que 19 lignes... )
Inattention due à ma focalisation sur les styles des boites.

div#blocinscription p est aussi redéfinis pour IE voilà pourquoi !

Je dois donc en effet réinitialiser la marge de div#boite p dans la feuille de style pour IE ! et tout rentre dans l'ordre et je n'ai plus besoin du
left: 70px;

Mes question se changent donc en : pourquoi IE me decale mon premier paragraphe comme ça ? Je vais plancher.



Pour illustrer :

div#blocinscription p {
margin: 0 0 0 -146px;
width: 280px;      
line-height: 2em;}
	
div#boite { 
margin: 160px 20px 0 20px;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fond.png',sizingMethod='crop' );}

div#boite p{ 
margin: 0;
width: 212px;
position: relative; 
/*  left: 70px;  */
}