Discussion :

[niko73]

Bonjour

voilà, j'ai positionné un logo dans ma page avec un div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div name='logo_free' class='logo_free'>
<a href="../pages/mapage.php" ><IMG src="../images/monimage.png" border=0></a>
</div>

et j'ai défini dans ma css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.logo_free {
position: absolute;
top:80px;
left:810px;
}

tout fonctionne bien en IE7 et Firefox 2 : mon png apparait bien avec fond transparent par dessus mon image

mais en IE6, j'ai un gros carré avec fond bleu clair et mon image dedans, comme s'il ignorait la transparence.

Savez vous pourquoi cette différence d'interprétation IE6 et IE7 ?

merci d'avance pour votre aide

Nicolas

[c_s_s]

Bonjour niko73

Ce sujet a été abordé de très nombreuses fois, je t'invite donc à faire une petite recherche sur la transparence des PNG sur IE6, tu trouveras de nombreuses réponses.

Dans tes prochains messages, n'hésite pas à mettre ton code entre les balises prévues à cet effet (en cliquant sur le bouton # dans les options de mise en forme du message).

Merci.


http://www.developpez.net/forums/d41...ansparent-ie6/

http://www.developpez.net/forums/d59...nsparence-png/

[limaleclaga]

de mon coté, je mets ce code dans le head.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--[if lt IE 7]>
<script language="JavaScript">
{literal}
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
   var arVersion = navigator.appVersion.split("MSIE")
   var version = parseFloat(arVersion[1])
   if ((version >= 5.5) && (document.body.filters)) 
   {
      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);
{/literal}
</script>
<![endif]-->