Les png transparent sous ie6 en background-repeat

Bonjour,

j'ai lu pas mal de choses sur l'insertion de png transparent sous internet explorer 6 qui nous génère un beau gris en guise de fond au lieu du fond transparent souhaité.

J'ai trouvé des solutions en javascript et en css...

Personnelement, j'utilises la version css et je detecte le navigateur de l'utilisateur via php.

en fonction du navigateur, ie6 ou autre, j'appele l'image de deux maniere différente...

pour tous les navigateurs, j'appele un background-image();
et pour ie6, j'appele filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

cette petite fonction retravaillée par microsoft est très pratique pour corriger les bugs de ie6...

mais je suis tombé sur un problème...
etant donné que l'on appele pas de background-image... le background-position ne fonctionne plus, mais le background-repeat non plus...
alors comment fait on lorsque l'on veut placer une ombre par exemple sur notre div container (sachant que la hauteur de celui-ci bouge (et donc le png transparent doit suivre)...
je block... et je veux le png transparent car le gif me donne un resultat a ch***.

Voila si vous avez des idees, je suis très interessé
Modifié par mushovelik (14 Sep 2007 - 18:07)

Bonjour,

Essaie en mettant comme paramètre "scale" au lieu de "crop" dans une feuille de style uniquement appelée pour IE6.
La méthode "scale" ne répète pas le background mais l'étire, ce qui parfois dénature le résultat souhaité.

#ton_conteneur  {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin_image.png',sizingMethod='scale');
background-image:none
}

Modifié par mecho (17 Sep 2007 - 12:30)

La répétition à proprement parler n'est pas possible via la propriété filter.

a écrit :
Essaie en mettant comme paramètre "scale" au lieu de "crop" dans une feuille de style uniquement appelée pour IE6.

Je n'utilise pas une feuille de style externe réservée à ie à proprement parlé. J'utilise une fonction php pour détecter le navigateur et appliquer le filtre si ie ou un background-image si autre navigateur... J'ai essayé avec scale et avec crop comme paramètre pour le filtre, j'ai remarqué que crop fonctionne bien sur les images bloquées (width et height defini).

a écrit :
La répétition à proprement parler n'est pas possible via la propriété filter.

C'est malheureusement la conclusion que j'ai tirée. Avez-vous une solution pour pouvoir contrer ou contourner ce problême en admettant que je veuille continuer avec un png transparent tout en ne sachant pas la hauteur de celui-ci?

mushovelik a écrit :
Avez-vous une solution pour pouvoir contrer ou contourner ce problême en admettant que je veuille continuer avec un png transparent tout en ne sachant pas la hauteur de celui-ci?

Deux solutions (peu satisfaisantes, mais ça dépanne):
1 - utiliser une image d'un seul tenant, suffisamment grande;
2 - ne pas utiliser de fond transparent dans IE6 pour de grands blocs de contenu.

Pour la deuxième solution, on pourra enregistrer l'image PNG avec une couleur de fond qui remplacera le fond gris moyen affiché habituellement, ou bien utiliser les commentaires conditionnels (en visant IE6 et inférieurs) pour basculer vers une couleur de fond (background: white, par exemple).

Pour les commentaires conditionnels, voir la FAQ du forum.

mushovelik a écrit :
J'utilise une fonction php pour détecter le navigateur et appliquer le filtre si ie ou un background-image si autre navigateur...

C'est un système peu fiable, vu que la valeur indiquée pour le User Agent n'est pas forcément bonne.

La seule technique 100% fiable pour détecter Internet Explorer (et mieux encore, les différentes versions d'Internet Explorer), ce sont les commentaires conditionnels.

Un autre avantage par rapport à ton système, c'est que tu peux adresser les mêmes styles à IE7 qu'aux autres navigateurs modernes (IE7 affiche très bien les PNG-24).

a écrit :
on pourra enregistrer l'image PNG avec une couleur de fond qui remplacera le fond gris moyen affiché habituellement

Le problème étant que mon fond n'est pas unis et donc lorsque l'on "scale" la fenêtre, on voit le bug. Même si c'est ridicule, j'essaie de le faire le plus proprement possible.

a écrit :
C'est un système peu fiable, vu que la valeur indiquée pour le User Agent n'est pas forcément bonne.

Jusqu'a présent, mes tests ont toujours été concluant, Je te crois sur parole lorsque tu me dis que le user agent n'est pas forcément bon mais dans quelles circonstances? (proxys?)

a écrit :
utiliser une image d'un seul tenant, suffisamment grande;

Je pense que cela me parait la meilleur solution, je vais m'engager vers la même si ce n'est pas super super propre.

Pour ne pas devoir charger une image de 5000px de haut, je me disais que je pourrai creer un truc du genre...

<div id="shadow">
     et alors ici faire une repetition de ma boite image (de 10px de 
     haut par exemple) via le code php de tel sorte a remplir l'espace 
</div>

Merci pour vos réponses.
Modifié par mushovelik (17 Sep 2007 - 20:06)

a écrit :
Je pense que cela me parait la meilleur solution, je vais m'engager vers la même si ce n'est pas super super propre.

Pour ne pas devoir charger une image de 5000px de haut, je me disais que je pourrai creer un truc du genre...

<div id="shadow">

     et alors ici faire une repetition de ma boite image (de 10px de 

     haut par exemple) via le code php de tel sorte a remplir l'espace 

</div>

Ok je viens de faire le test avec une div à droite de mon container en guise d'ombrage, mais j'ai absolument besoin de savoir la hauteur de la div pour que mon image (mm si elle fait 10 000px de haut) s'affiche correctement.
le width:auto ne fonctionne pas.

J'ai fais le test avec une image de 10 000px de haut car le poids de l'image ne faisait que 300o ^^ (=> pas nécéssaire de faire une répétition de balise html...)

Donc je me retrouve avec le même problème ^^

J'ai regardé également sur le net après des réponses sur les commentaires conditionnels qui ont l'air bien pratique et sur le problème de la fonction user agent de php.

Le seul problème des commentaires conditionnels est l'impossibilité de pouvoir jouer dans la feuille de style.php (au niveau de recherche du navigateur), mais bon, tu me diras de créer une feuille de style propre à ie 6.

mushovelik a écrit :
mais bon, tu me diras de créer une feuille de style propre à ie 6.

Non: créer une feuille de style pour tous les navigateurs, et une feuille de correctifs en plus pour IE6.

a écrit :
et une feuille de correctifs en plus pour IE6.

oui on dit la même chose