How To Make PNG Images Work In IE6

Internet Explorer 6 Still Has A Percentage - Why Not Cater For It

In this section I will show you how to fix the problem that Internet Explorer 6 has when displaying PNG (Portable Network Graphics) image files. If you are not aware, which you may not be if you use a web browser other than IE6, IE6 by default displays .png image files with a solid grey-white (dirty white) background instead of a Transparent (See-Through) background.

Although IE7 and IE8 do not have this png transparency problem Microsoft still refuses to kill off IE6 - One of the main reasons for this is because IE6 is the default web browser for Windows XP. So unless your IE6 visitors upgrade to IE7 or IE8, those visitors will see your .png images with a square, grey-white, background and therefore wonder what is going on. They make think you are not good at website design and leave your website instantly.

So in reality you have to fix the png transparency problem for IE6 and at the same time educate your IE6 visitors, via a screen message for example, that states why they should move with the times and changed to IE7 or IE8.

FIXING THE PROBLEM

To fix the PNG Transparency problem you first need to download IE PNG Fix. There are two versions of the code available, V1.0 and V2.0, so download both of them even though in this example I will only use V1.0.

When testing both versions I found V1.0 fixed the problem whereas V2.0 did not completely get rid of the problem. This can happen naturally with updated code - It depends how the author tested it, how I tested it, whether or not we had differences in our test computers and IE6 versions and so on. Programmers Headache should be in some kind of dictionary before too long! You see on forums all the time that a "Fix" worked for many people but did nothing for others. Anyway. Try both to see if any of them works for you.

Regardless of which version you download, after unzipping each one into their respective folders (i.e. iepngfix and iepngfix_v2) both folders will contain a file called iepngfix.htc and a file called blank.gif. You can ignore the other test files in each folder because they are for the author's demo. In this example simply upload the iepngfix.htc file and blank.gif file to your public_html (website) folder and then copy the following highlighted code into each web page, of yours, that displays one or more .png image.

Fig 1.0  Copy the highlighted code into each web page, of yours, that displays one or more .png image

Fig 1.0 above represents a standard web page. In the middle of the code I am displaying two .png images. A British Flag (with a link to an index.html file in an ENglish folder) and a French Flag (with a link to an index.html file in the public_html folder). Under IE6, without the code fix, those flags are displayed with a solid grey-white background (Fig 1.1 below) whereas the same web page with the code fix inside it displays the flags correctly with a transparent background.

Fig 1.1  IE6 - It defaults to displaying a .png image with a solid grey-white background




Fig 1.2  IE6 - With the code fix each .png image is correctly displayed with a transparent background

The above is a small example in terms of the number of .png images and placement but if you imagine ten mixed size .png images positioned randomly on the web page, each with a solid grey-white background, you would further see why IE6 can make your work look ugly and unprofessional. As said, this does not happen with IE7 and IE8 because they support .png images (transparency) properly.

Other, major, web browsers support .png images (transparency) properly too and have done so even before IE8 and IE7. Web browsers that use the IE6 Layout Engine (see the Which Web Browser section for more information) will naturally have the IE6 PNG Transparency problem though.

Go back to the code. If you have an IMG tag (command/instruction) inside your HTML code that is within a DIV tag you must include div in the STYLE code, like I have done. img, div, a, input.....etc. If you put img only you may wonder why the code is not working. It will be because you need to include div. To play safe keep all of the tags in the STYLE code. That way, regardless if one web page only needs img and another web page only needs img and div, the code should work for that web page's .png image(s).

Do You Really Need This Fix?

Yes! If you want to cater for every visitor. And NO if you think: If they do not want to upgrade to IE7 or IE8, for FREE, what's the likely hood of them buying a product from me?". The latter, in my opinion, is true. I would not fill my web pages with IE6 fixes if I was selling a product.