Bonjour,

J'ai un léger probléme avec le fichier .htc qui permet de corriger le bug de transparence des png sous ie6.

ma css appele le fichier htc sur toutes les classes .png:

.png{
behavior: url('png.htc');
}

et mon fichier .htc se trouvant a la racine de mon dossier appelle un blank.gif correctement.

Correctement, car le tout fonctionne en local. C'est lorsque je le mets sur le serveur de mon client que j'ai un problème. On dirait que soit la css ne référence pas le fichier .htc correctement, soit que celui-ci n'est pas correctement exécuté. J'ai donc essayé de forcer le tout via des adresses absolues : Lorsque je mets des adresses absolues pour trouver le fichier .htc via le serveur de mon client et que je le teste soit en local, soit via le serveur de mon client, j'ai le même problème.

J'en viens donc a la question, est-ce qu'il faut activer des paramétres sur le serveur pour que les fichiers .htc fonctionne correctement ou bien s'agit-il simplement d'un problème de lien que je n'arrive pas a voir?

Avez-vous une idée ?

http://www.plastiquesgagnon.com/demo/fr/

regarder le logo sous ie6.

Merci d'avance.
Modifié par mushovelik (02 Jul 2008 - 16:43)
Administrateur
Bonjour,

tu n'aurais pas un problème de chemin relatif HTML/CSS?
Tout ce que tu charges depuis une feuille de style doit être référencé en indiquant non pas un chemin relatif à l'emplacement de ta page HTML mais relatif à l'emplacement de ta feuille de style. Si cette dernière est dans un sous-sous-sous-répertoire par rapport à ta page HTML et que ce que tu veux charger est dans un autre sous-sous-répertoire par rapport au code HTML, il te faut d'abord remonter l'arborescence grâce au "répertoire parent" ".."

Ex pour ta feuille de style /demo/fr/templates/plastiques_gagnon/css/template_ie6.css
templates/plastiques_gagnon/images/bg_box_top_big.png
==>
../../templates/plastiques_gagnon/images/bg_box_top_big.png


Plus simple, met tout dans un même répertoire (temporairement) ou teste en premier lieu si la feuille de style conditionnelle est chargée (une instruction qui passe le fond d'un div normalement transparent en rouge fera l'affaire. Si ça devient pas rouge, feuille non prise en compte)

Si c'est pas ça, je ne peux pas t'aider plus, vu que grâce aux PNG "tout-terrain" de Fireworks et pngnq je n'ai jamais eu à expérimenter cette technique ...
Modifié par Felipe (01 Jul 2008 - 19:34)
Merci de ta réponse Felipe.

Je comprends très bien le système de relatif au niveaux des images via la css et non via le premier niveau de l'index.html.

C'est comme cela que ma feuille général (template.css) est batie.

Paradoxalement, lorsque j'appelle la feuille de style d'ie6(template_ie6.css), qui est appelée correctement via les commentaires conditionnels d'ie, je suis obligé de référencer mes images via l'index.html et non plus via la css pour que cela fonctionne.

Donc mon problème ne se situe pas la. Car ces images sont bien appelée mais directement via la css.
exemple: 
#box_top_big		{	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/plastiques_gagnon/images/bg_box_top_big.png'		,	sizingMethod='scale');	}


Mon problème vient d'une deuxième manière de modifier les png transparent. La méthode suivante:
<img class="png" src="/PLASTIQUES_GAGNON/en/images/stories/plastique_gagnon/bg_logo.png" border="0" alt="Logo Plastiques gagnon" title="Logo Plastiques gagnon" />


une balise img qui appele une classe png
.png{behavior: url('png.htc');}


ce fichier .htc modifie chaque élément qui l'a appelé pour transformer le png.

Et c'est avec cette technique que j'ai un problème.
Malheureusement, je ne peux utilisé la manière statique car, je travaille au sein du CMS Joomla et ces paramètres doivent être facilement modifiable pour l'administrateur.

En ce qui concerne les PNG "tout-terrain" de fireworks, bien que google soit mon ami, vu que tu abordes le sujet, peux-tu me donner d'avantages d'explication sur les avantages de ceux-ci?

Je t'avoue que j'en ai un peu marre de me casser le c** sur ie6 mais les png sont tellement plus beau...

merci.
Bonjour à tous,

Petits liens utiles/interessants pour la route ?

http://www.css-ig.net/docs/transparence_format_png/#support
http://openweb.eu.org/articles/png_vs_gif/

Le choix du format et du type d'encodage des images png peut donc résoudre très simplement ces petits soucis de gestion de la transparence qu'ont certains navigateurs (et plus spécifiquement IE6) et peut vous éviter "les bidouilles" habituelles qui ajoutent un code souvent inutile, parfois hasardeux, voir inéfficace ou problématique (Javascript, Css, PHP,...)

Juste vous rappeller également que la gestion du gif transparent ne pose quant à lui aucun problème (si ce n'est ses "limitations techniques" : une seule couleur de transparence...sic) mais cela peut s'évérer suffisant dans certains cas (design "simple", logo sur fond uni...) à méditer avant de...peut-être ?

Bonne journée,
Cdt,
Sylvain
Merci pour ce tutoriel.

Je suis tout a fait d'accord avec toi sur le fait qu'il existe des alternatives avant d'utiliser les png transparent non-compatible a ie6.

Je t'avoue que je ne connaissais pas la théorie pure et dur concernant les png. J'avais juste constaté que les png24 transparent dit translucide n'était vraiment pas accepté par ie6 et mon alternative a ce moment là était de trouver, comme tu l'as cité, une bidouille en guise de solution.

En tout cas, je te remercie pour tes deux liens qui sont très intéressant (Surtout le deuxieme qui propose le plug-in SuperPng).