Fix PNG images with transparency in older Windows Internet Explorer versions

I wonder if this post would still get hits from search engine result pages. So many other web pages feature this fix for IE 5.5 and IE 6 web browser, that the Catzie.net Blog’s entry might just show up on the… 10th page or so. lol.

Anyways, I’m still posting this, in case there are some visitors browsing around who need help with properly displaying the transparency of .PNG images in IE5.5 and IE6. This also helps me easily find the needed code to fix the display. I need it from time to time when I design website layouts. 🙂

Tip: Most of us are probably using the newer versions of Internet Explorer. I suggest that you download and use the IE Tester. It’s a web browser that lets you see how web pages render in different versions of IE – 5.5, 6, 7, and 8.

I assume that as you read this, you are using Internet Explorer version 5.5, or the version 5.5 tab on the IE Tester.

The following .png image has a grayish background color that replaces the parts that are supposed to be transparent.

This is the code for what’s show above.

Please click here to open on a new window the fixed version of what we are trying to display. You’d notice that there’s no longer the grayish background on the parts that are supposed to be transparent. Now you can see through the pink background.

The final code is:

The code above uses conditional comment to check if your current browser is older than IE 7. If it is, the JavaScript code which corrects the display of the .png is executed.

This method has limitations though. It works only on IE5.5 and IE6. It needs JavaScript enabled on your browser, or else it won’t work. And it only works on images placed using the <img> tag. It won’t work on background images.

I learned about this fix from this website

Related Posts:

Posts that may be related to "Fix PNG images with transparency in older Windows Internet Explorer versions":

Catzie

A Filipino programmer and baker. When I have time to spare, I blog, play video games, watch series (usually anime), cook dishes, draw, or spend a little time with pets. When I have the rare luxury of time, I get to travel and record song covers too! Running small-time online dessert shops Cookies PH and Catzie's Cakery.

One comment on “Fix PNG images with transparency in older Windows Internet Explorer versions

 

  1. Hi there, Im at my work and was surfing around the net, goofing off, when I came over your web page. It’s quite nicely executed, and I certainly like your way of writing.

Leave a Reply

Your email address will not be published. Required fields are marked *