28112 sujets

CSS et mise en forme, CSS3

Png et IE

Bonjour,

j'essaye de faire un menu CSS avec la technique des "portes-coulissantes".
Problème :
L'image PNG qui s'affiche impec sur Firefox déconne complet sous IE (la zone sencé être transparente est blanchatre... c'est ignoble)

IE ne comprend pas les PNG ?

J'ai essayé avec GIF au lieu de PNG, mais il reste toujours un contour "pas net"

Est-ce que quelqu'un peut me dire si les PNG sont déconseillés ? Je croiyais qu'ils étaient recommandés par le W3C ?!?

Merci Smiley rolleyes
Bonjour,
Malheuresement IE ne comprend pas la transparence des PNG ... (IE7 devrait le faire ...), malgrès qu'il soient recommandés par le W3C.
Tu est donc obligé obligé d'utiliser une gif (en bidouillant la transparence pour que le contour soit net ...) ou de changer de méthode ...

Bon courage ...
Bonjour,

Une précision : bien qu'elle se soit révélée à l'usage d'une très grande utilité et que les designers y soient très attachés à juste titre, la transparence alpha est une partie optionnelle de la norme PNG Smiley cligne .

Mais l'important est effectivement que son support est en train de devenir systématique.
Modifié par Laurent Denis (03 Nov 2005 - 09:45)
Administrateur
fxoxo a écrit :
Malheuresement IE ne comprend pas la transparence des PNG ... (IE7 devrait le faire ...)

Pour être plus précis, ce sont les niveaux de transparence qui ne sont pas reconnus par IE (les dégradés de transparence). Par contre, la transparence "simple" est reconnue.
Les niveaux de transparence ?
Qu'est-ce que c'est ?

Ca veut dire que c'est en créant mon PNG que tout se joue ?
salut, oui c'est au moment de la création de ton image que tout se joue. Le PNG 8 bit te permet de mettre une transparence "unie" seulement. Soit c'est transparent soit ca ne l'est pas, donc opaque.

Avec le PNG 24 bit tu peux créer une sorte de dégradé de transparence, ou une transparence de plusieurs niveaux.

Je sais pas si mes explication ont été claires mais bon essaies de tester les deux modes png avec la transparence.

a+
http://www.core.gizmo-designs.com/archives/2005/10/07/transparente-png-im-ie-556/


Pour ceux qui sont germanophobes, ou même non germanophone, voilà les 2 solutions proposées:


<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->


Insérer ça dans la balise <head></head>


pngfix.js:

// Correctly handle PNG transparency in Win IE 5.5 or higher.
//  http://homepage.ntlworld.com/bobosola.  Updated 02-March-2004

function correctPNG() 
   {
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
   }
window.attachEvent("onload", correctPNG);




La deuxième solution est plus simple, il semblerait en effet que si l'on met les attributs "width" et "height" directement dans la balise IMG ( et non dans la CSS, cela marche ). Je ne garantis rien.

[/i]
Il y a moyen d'utiliser la transparence alpha (en 256 niveaux donc) pour les arrières plan aussi.

Il faut utiliser un propriété css propre à IE (filter) et la protéger dans une feuille apellé avec un commentaire conditionnel par exemple.
Il y a aussi des problèmes avec le png 8 bits : il suffit de faire un png couleur pleine sur une fond de même couleur, et on constate sans problème que la couleur affichée n'est pas bonne.
Bonsoir,

Merci pour toutes ces pistes.
Comme j'ai une petite tendance à penser que la solution la plus simple est toujours la meilleure, j'ai opté pour reprendre mes png...
J'en ai fais des gifs (puisque je n'ai pas tellement vu de différences entre un gif et un png 8 bits) et en jouant sur la couleur de détourage, j'ai trouvé un résultat qui me convenait assez...

On verra si ça s'affiche correctement partout, mais pour l'instant, sous mon IE et sous mon Mozilla, c'est OK Smiley lol

Merci beaucoup...
Y a pas à dire, ça a du bon internet, quand on a la chance de tomber sur des gens comme vous Smiley langue
Sujet clos
Aller à