28172 sujets

CSS et mise en forme, CSS3

PNG, IE6 et une bonne dose d'incompréhension

Bonsoir à vous...

la raison de ce post peut sembler très banale au vue du titre. Dans le fait aussi puisqu'il concerne un problème d'image sur IE6.
Toutefois il ne s'agit pas du classique problème "ah que pourquoi mon fond de l'image il est tout bleu?"...

En gros j'ai un client qui me dit que sur son portable il voit des cadre noir sur ces images... Smiley sweatdrop et plus particulièrement sous IE6!
Donc au début je disais, "ça y est mon script pour Ie6 déconne", hé bien non...
j'ai en effet un cadre noir sur les images PNG, mais (et c'est là où je suis désabusé ) cela ne se fait que sur un vieux portable qui tourne avec IE6...
et voilà le résultat :

upload/8730-exemple.png

Mais ce que je ne comprend pas c'est d'où vient ce cadre noir? est-ce lié à ce problème propre à IE6? Ou un problème de visualisation dû à un vieux portable?
Sachant que j'ai testé sous IE6 par le biais de MultipleIE et virtualPC sur mo ordi et je ne recontre pas de problème... Smiley biggol

Donc je suis très tétonné car en plus le cadre ne correspond pas au contour de l'image...
J'en appel donc à votre expérience et ou votre science, car mes recherches me ramène toujours vers les solutions PNG pour IE6... nulle part je n'ai trouvé de cas similaire...

D'avance merci! Smiley biggrin
Modifié par Ryukisai (20 Aug 2007 - 21:50)
Bonjour à tous,
Concernant ces fameux problemes d'affichage
Il ne s'agit pas d'un problème de code, mais plutot d'un problème de support d'affichage 32bits. Les vieux PC avec un driver de carte qui ne supporte pas ce mode afficheront les images 32bit (png, mais aussi icones et autres format avec un canal alpha) de cette facon.
Une solution : faire des doublures en gif et un code php qui detecte le navigateur et remplace tous les png par des gif avant d'afficher la page.
Le resultat est moins beau, mais totalement compatible et ne nécéssite aucun code javascript.

C'est la solution que j'ai mis au point et utilisée sur mon site, pour l'instant avec du png converti à la va-vite donc pour l'instant le resultat est moche.
(a cause des ombres portées, la conversion donne un résultat très laid)
quand j'aurai un peu plus de temps je referai les graphisme gif pour un meilleur résultat.
Salut Scorpius,

merci pour l'info, c'est vrai que j'ai pas vraiment relevé le problème car le projet est au point mort...

mais en tout cas merci pour cette précision! Smiley biggrin
Modifié par Ryukisai (06 Oct 2007 - 14:17)
Bonjour,
Voici une solution facile que j'utilise et qui évite au navigateur :
1. de tester toutes les images de la page
2. de mal afficher les images pendant le chargement de la page et l'exécution d'un script global
3. qui économise au maximum mémoire et cpu

<head>
<script type="text/javascript">
// Correctif de l'affichage des images PNG dans IE5.5 et IE6 (transparent pour les autres navigateurs).
// V1.1 par Brice de Villeneuve,  http://www.boursica.com/
 
// Licence : freeware, librement utilisable du moment que vous laissez ces commentaires dans votre source.
// Mettre ce script dans le head et dans les balises IMG ajouter simplement : onload='setpng(this)'
// Si l'image n'est pas visible (display:none par exemple), appeler la fonction juste après l'affichage de l'image
// dans un javascript avec, par exemple, un setpng(document.getElementById('idDeMonImage');
function setpng(img) { if(document.all && (IEver=parseFloat(navigator.appVersion.split("MSIE")[1])) && (IEver>=5.5) && (IEver<7) && document.body.filters && img) {
	imgName=img.src.toUpperCase();
	if(imgName.substring(imgName.length-3,imgName.length)=="PNG") img.outerHTML=
		"<span "+(img.id?"id='"+img.id+"' ":"")+(img.className?"class='"+img.className+"' ":"")+(img.title?"title=\""+img.title+"\" ":"")
		+"style=\"width:"+img.width+"px;height:"+img.height+"px;"+(img.align=="left"?"float:left;" [decu]img.align=="right"?"float:right;":""))
		+(img.parentElement.href?"cursor:hand;":"")+"display:inline-block;"+img.style.cssText+";"
		+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img.src+"',sizingMethod='scale');\"></span>";
}}
</script>
</head>
<body>
<img border=0 style='position:absolute' src='monimage.png' onload='setpng(this)'>
Blabla blabla<br>
Blabla blabla<br>
Blabla blabla
</body>
Salut à tous!

Ce post m'intéresse car j'ai le meme genre de souci.
PNG qui s'affiche avec un fond sur IE6.
Mon vrai prbl c que j'ai mis les images PNG dans un fichier CSS dans le background-image de certaines balises...
Du coup les astuces ne fonctionnent pas trop...
Si vous avez des idées d'avance merci !
Pat_07 a écrit :

Merci pour le tuyau !
A priori du coup cette méthode ne marche plus avec Firefox... Smiley biggrin
Je vais tester un peu mieux.
Firefox interprète très bien le PNG-24 donc il n'est pas nécessaire d'utiliser de méthode... Smiley cligne
Modifié par Heyoan (09 Sep 2008 - 12:18)
Heyoan a écrit :
Firefox interprète très bien le PNG-24 donc il n'est pas nécessaire d'utiliser de méthode... Smiley cligne


Oui mais justement je voudrais que ca fonctionne pour les deux FF et IE6...
Smiley ohwell
Pat_07 a écrit :


Oui mais justement je voudrais que ca fonctionne pour les deux FF et IE6...
Smiley ohwell
Oui j'avais bien compris Smiley lol ! D'où le lien vers la FAQ puisque le problème ne se pose qu'avec IE < 7.

Pour être encore plus clair : si tu utilises des images en png-24 il n'y aura pas de problème avec Firefox et si tu veux que ça passe avec IE < 7 il faut ruser.
Heyoan a écrit :
Oui j'avais bien compris Smiley lol ! D'où le lien vers la FAQ puisque le problème ne se pose qu'avec IE < 7.

Pour être encore plus clair : si tu utilises des images en png-24 il n'y aura pas de problème avec Firefox et si tu veux que ça passe avec IE < 7 il faut ruser.


Merci bcp oh grand modérateur ! Smiley cligne
J'ai réussi à me dépatouiller avec ALPHAIMAGELOADER, meme j'ai du mal à positionner l'image aussi bien que ce que je pouvais le faire dans FF.
Sujet clos
Aller à