Png transparent ie6 [resolu]

Bonjour,

Je viens vers vous pour de l'aide sur le filtre :
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='bande_footer2.png');

Voilà mon cas particulier : www.francois-rosenbaum.com/problemepng/accueil.html

Pour les flemmard voilà la capture d'ecran de ce à quoi ça devrait ressembler dans un monde magnifique :

Et voilà en gros plan ce que j'obtiens selon les navigateurs :


le partie sur fond bland est est une div suivie du footer sur fond gris qui est une autre div. Bizarement le filtre fonctionne bien sur le footer mais pas sur la div au fond blanc.

Comme on peut le constater ce filtre soit disant tres simple ne l'est pas du tout. Je me suis deja très bien renseigné.J'ai besoin de votre aide. Vous êtes mon dernier espoir.

voilà comment je l'ai appliqué :

1/ j'ai crée une feuille de style spéciale IE voir image ci-dessous :


2/ j'ai mis ça dans le code de ma feuille CSS générale.


3/ voilà le code de la css specifique à IE


___________________________________________________

Ce qui est tout à fait incroyable :
c'est que quand j'efface ça du code css general :
background-image:url(bande_fond_blanc.png);
Focemment je n'ai plus mon ombre sur firefox (ça c normal)
Mais d'un coup tout marche parfaitement sur IE6 et 7.

Donc : comme je voudrais que ça marche sur ces 3 navigateurs comment dois je faire?
Et pourquoi le filtre fonctionne dans le cas de mon footer et pas ailleurs?
html : <div id="footer"></div>
css :
#footer{
margin:0 auto 0 auto;
height:46px;
width:800px;
background-image:url(bande_footer2.png);
}
css IE :
div#footer{
background-image : none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.francois-rosenbaum.com/manufactures_chateau/bande_footer2.png');
}


voilà j'ai essayé d'etre le plus clair possible .
J'ai besoin d'un vrai expert.
Merci d'avance,

Francois
Modifié par boucdur (21 Feb 2008 - 14:32)

j'ai oublié d'introduire mon sujet dans le post au dessus :

il s'agit de mettre dans une div une image en background d'ombre.
je fais un site pour une usine, et tout le site est entouré d'une ombre.
j'ai donc une div qui contient tout sauf le footer et qui contient une image png en background comme ça :
l'ombre est sur fond transparent



voilà aussi l'image utilisé sur mon footer qui lui fonctionne bien avec le filtre

Bonjour,

Tu as commis deux erreurs avec ton commentaire conditionnel:

1. Tu appelles ta feuille de correctifs CSS aussi bien pour IE6 que pour IE7... or, IE7 utilise correctement la transparence PNG, donc un correctif n'est pas nécessaire.
Une supposition rapide: IE7 affiche 1) l'image de fond et 2) en surcouche l'image indiquée pour la propriété filter (qui n'affiche pas une image de fond mais une couche graphique intermédiaire entre le fond et le contenu). Deux couches d'images transparente = un rendu plus sombre.

2. Tu déclares ta feuille de correctifs CSS avant la feuille de styles principale. Il faut faire l'inverse, et pour IE6 bien penser à déclarer un background: none.

faut bien cliquer sur les apperçu d'images (illisibles) dans les post ci dessus pour voir les captures d'ecran correctement.

Je remercie ceux qui ont le courage de lire l'integralité de mon message.

Bon je vous embete plus et j'attends vos réponses impatiemment.

les codes sont a mettre entre les balise [ code] [/code ] sans les espace.

Hélas la propriété Filter ne marche pas sur les background qui sont "en repeat"

merci florent, je suis hyper content que tu repondes si vite
je regarde tout de suite ta reponse très attentivement

Merci hakkou pour l'aide:
tu es bien à 100% que ça ne marche pas avec les backgournd en repeat.
Ce qui rendrait mon design absolument imossible à intégrer tel que je l'ai conçu?

a ma connaissance il n'existe pas de filter pour les repeat.... en tout cas pour ma part j'ai chercher enormément...mais jamais trouvé la solution on rencontre souvent des reponses qui disent que ca ne marche pas pour les repeat.
le salut viendera peut etre d'un script JS. mais je ne sais pas si c'est script existent ou pas desolé
Modifié par hakkou (06 Jan 2008 - 23:20)

YYYYiiiiiiiiiiiiiiiiiiiiiiiiiiHHHHHHHAAAAAAA !!!!!!
probleme résolu !!!!!
J'ai juste changé l'ordre d'appel de mes feuilles CSS.
j'ai mis en premier la feuille générale pui la feuille speciale IE en 2eme.

Et soudain ça marche sur les 3 navigateur ie6 ie7 et firefox.

Sinon j'ai laissé le reste comme c'etait.


Merci Florent tu m'a sauvé la vie avec ta solution toute simple.

Hakkou la propriété Filter... marche bien sur un bakground en repeat puis que c'est le cas de mon site.

Merci

Probleme résolu !!!

Content que ca marche ^^
Ceci dit, sous mon IE6 le png ne marche toujours pas

boucdur a écrit :
Hakkou la propriété Filter... marche bien sur un bakground en repeat puis que c'est le cas de mon site.

Pas forcément suivant le motif
Il n'est, à ma connaissance, pas possible de faire l'équivalent d'un background-repeat avec le filtre.

Dans ton script il est utilisé: sizingMethod='scale'. c'est à dire que l'image est étirée sur toute la surface à disposition, ce qui correspond bien à ton cas puisque l'étirement horizontale revient au même qu'une répétition verticale. Je te laisse imaginer un étirement sur un motif qu'on voudrait répéter...

L'autre option est sizingMethod='crop' qui n'insérerait l'image qu'une seule fois, depuis le haut gauche de l'élément.

On est donc malheureusement vite limité, pour faire une simple correction, avec ce filtre puisqu'on ne peut ni répéter ni positionner les éléments sur la droite ou le bas
Modifié par Candygirl (08 Jan 2008 - 13:12)

boucdur a écrit :
YYYYiiiiiiiiiiiiiiiiiiiiiiiiiiHHHHHHHAAAAAAA !!!!!!
probleme résolu !!!!!

(...)

Probleme résolu !!!

Bonjour,

content que tu sois content d'avoir résolu ton problème mais je serais encore plus content si tu le marquais [Résolu] comme demandé sur ce forum

Felipe