Topic: Making PNGs work in IE6

Hi,
Has anybody ever used a PNG image with alpha transparency on their website? I wonder if there's any Rails function that makes them work in IE6 and earlier. I don't feel like I want to have tons of JavaScript in my application. Any experience in this area?

Re: Making PNGs work in IE6

transparent .png's just don't work in IE6.

No workarounds.

People don't hate IE for fun wink

Re: Making PNGs work in IE6

Actually I read about a fix in Pragmatic Ajax but it only works for images loaded into a div background as I understand, not <img> tags. And it's still Javascript. I don't think Rails could communicate with the browser directly. Still downloading the base script from A List Apart makes implementation pretty clean and painless I'd say.

http://www.alistapart.com/articles/pngopacity

Last edited by marsvin (2006-12-03 14:52:03)

Re: Making PNGs work in IE6

The article on ALA is good, but I think it's only worth it if you have loads of transparent images on your site (which I don't - only 2!). I've read somewhere that there's also a PHP function to deal with this problem. It's a shame there's nothing comparable in Rails... Anyway, thanks for your help.

Re: Making PNGs work in IE6

Oops, just noticed there's a typo in my thread title. Should be "IE6", not "I6". Sorry about that!

Re: Making PNGs work in IE6

I still don't really see how a server-side function could affect the way the browser renders an image. You're right though, that script's only really worth it if you're going to be using a lot of transparency and single bit transparency doesn't cut it.

Re: Making PNGs work in IE6

PixelLover wrote:

Oops, just noticed there's a typo in my thread title. Should be "IE6", not "I6". Sorry about that!

I got your back. Fixed. wink

Josh Catone helps run this place
Rails Forum - Rails Jobs

Re: Making PNGs work in IE6

check out the Adobe site Edge newsletter for this month. They have an article on how they used CSS to build the layout and how they handled transparency for IE6 and earlier using some IE proprietary filter method. I'd add the link but I'm at work and it the Adobe site gets blocked here for some reason.  Shouldn't be too hard to find on their site.

Re: Making PNGs work in IE6

If you haven't found a solution yet, look at this:

http://homepage.ntlworld.com/bobosola/pnghowto.htm

and if you want to use a png for a transparent background look at this:

http://allinthehead.com/retro/69/

Re: Making PNGs work in IE6

here's the contents of a file called "pngfix.js" that I've used several times in the past.  I got it off the pre-launch page of fivelimes.com

/*
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/

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='image');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}