Tilted Forum Project Discussion Community - Need help with PNG file on website when viewing with IE

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - Need help with PNG file on website when viewing with IE (https://thetfp.com/tfp/tilted-technology/97492-need-help-png-file-website-when-viewing-ie.html)

Need help with PNG file on website when viewing with IE

Thanks to ngdawg she showed me how to take a file and make the background transparent by making it into a PNG file...unfortuantely it doesnt show up that way in IE.

I have researched and yes, I know this is a problem for IE versions under 7...my problem is for the life of me I cannot figure out how to add the "fix" code because I just dont understand it.

Is there anyone that can help me? Its just for ONE page, and for ONE image on that page.

I did a quick google and here's what I found.
You're going to want to copy and paste this part inside of your <head> </head> tags:

Code:

<!--[if gte IE 5.5000]>

   <script language="JavaScript"> var ie55up = true </script>

<![endif]-->

<script language="JavaScript">

function fixPNG(myImage) // correctly handle PNG transparency in Win IE 5.5 or higher.

   {

    if (window.ie55up)

         {

         var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""

         var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""

         var imgTitle = (myImage.title) ? "title='" + myImage.title + "' " : "title='" + myImage.alt + "' "

         var imgStyle = "display:inline-block;" + myImage.style.cssText 

         var strNewHTML = "<span " + imgID + imgClass + imgTitle

         strNewHTML += " style=\"" + "width:" + myImage.width + "px; height:" + myImage.height + "px;" + imgStyle + ";"

         strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

         strNewHTML += "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>" 

         myImage.outerHTML = strNewHTML

         }

   }

</script>

And for the image itself:

Code:

<img src="your.png" height="15" width="21" onload="fixPNG(this)">

where your.png is your png file. And yes, you must include the height and width in the img tag.

I tried that and I couldnt get it to work....is there anything in that first bit I need to change? Thats the bit that was WAY confusing me

ShaniFaye, don't forget that this fix simply won't work when people have JavaScript (or I guess scripting period in IE, I forget) disabled, period.

I think the new Firefox allows you to turn JavaScript on and off for certain domains, but I'm not sure about Internet Explorer <= 6.