Fix PNG issue IE6

IE6 doesn’t have the ability to render png. To fix the png issue of CSS and HTML images and DIV tags Kindly use approved and tested techniques that we will discuss today.

We are going to implement iepngfix. You can download it for free from http://www.twinhelix.com/css/iepngfix/

This uses CSS "behaviors", a custom Microsoft extension to CSS. As such, it will not affect any other browsers like Mozilla and Opera which already implement good PNG support. It will also not help IE4.0 and IE5.0, which don't include the necessary IE filter, and does nothing with IE5/Mac (which natively supports translucent PNG foreground images, however).

Installation:

Follow these simple steps to add this to your page:

1. Copy and paste iepngfix.htc and blank.gif into your website folder.
2. Copy and paste this into your website's CSS or HTML:

That CSS selector must include the tags/elements on which you want PNG support -- basically, give it a comma-separated list of tags you use. It must also include the correct path to the .HTC relative to the HTML document location (not relative to the CSS document!). For instance, yours may look like this:

3. If your site uses subfolders, open the .HTC file in a text editor like Windows Notepad and change the blankImg variable to include a correct path to blank.gif like so:

var blankImg = '/images/blank.gif';

Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!

4. Sit back and enjoy! Perhaps consider making a donation to support this script's development if you like what you see, as I have spent hundreds of hours developing, testing and supporting it :). Alternatively, I would certainly appreciate a crediting link on your site back to mine!

If you are interested in more details or an alternative activation method for the script that maintains CSS validation compatibility, see the source code to this demonstration file.

How to fix common problems

I've pasted in the CSS but my PNGs aren't transparent!

Make sure you remember that the path to the HTC file is relative to the HTML file, not the CSS file (like CSS background images are). If you want to test the path, insert this: alert('This works!'); into the .HTC file.

It works offline but not online.

First try unzipping this default demonstration and uploading to your web server as-is. If it doesn't work, you may have a MIME type problem. You must ensure your server is sending the correct MIME type of "text/x-component" for .HTC files. Try one of these two easy fixes:

1. Upload the ".htaccess" file from within this script's download ZIP to your webserver, which will make Apache send the correct MIME type.

2. Instead of calling "IEPNGFIX.HTC" from your CSS, upload IEPNGFIX.PHP to the same folder and call that instead, which also sends the right MIME type.

My PNGs are transparent but have a funny border or red "X" icon.

Check that the blankImg variable is set correctly in the .HTC file, again this should be relative to the HTML document containing the PNGs.

Images are distorted, or this script breaks my page layout.

When applied to images without set dimensions, this script will try and "guess" the correct image size and apply that. If it gets it wrong, give your images a definite width and height.

Links or form elements within a PNG'd element aren't clickable.

Due to an IE bug, if you are putting links within an element with a transparent background, the element must not have a CSS relative/absolute position. Otherwise the links will likely be un-clickable. The script will warn you with a popup alert dialog if this occurs. There is an excellent article on PNG filters and links you might want to read if you are a CSS expert that contains more info and workarounds.

It works, but breaks another application like Google Maps on my page.

You'll need to stop applying this behavior to the third-party element that presumably contains its own PNG fix. Try making your CSS selector more specific, or put a manual override for the element in your CSS like so: * html div#map img { behavior: none; }

I have IE6 installed "alongside" IE7+, and this script fails.

Either try on a computer with IE6 installed system-wide, or make sure that you copy the required DLLs into your IE6 folder. You will need dxtrans.dll and dxtmsft.dll for filter support, try Googling for them or finding them on your Windows install CD. Note that I can't support your setup here, sorry!

I have lots of images and page loading is slow.

With a lot of images, it can certainly slow down your page! Make sure that you apply the script as narrowly as possible. Consider applying only to elements of a particular CLASS perhaps, rather than all tags...

It still won't go.

Try running the self-test at the bottom of the list of demo images. If that throws any errors, you'll know where to start fixing!

Limitations and known isses with the script

• Background repeat and position are largely unsupported, this is due to a limitation in the IE transparency filter. If your background is set to repeat, the PNG will stretch to fill the element, and if it's 'no-repeat', the PNG will display once (untiled) pixel-for-pixel.
• Padding and borders don't indent the PNG image and can sometimes contribute to the distortion problem. An easy fix is to use 'margin' instead.
• A:HOVER transparent images are not supported out of the box. If you want this functionality, I recommend you download the excellent Whatever:hover script. This script will then enable :hover PNG background changes on all page elements when both are applied to the page.
• IE 4.0/5.0 are not supported. MSIE/Mac has native support for IMG SRC but no background PNG support. The scripts does nothing in MSIE7 as it supports PNGs natively.
• Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that. In some cases this might be a feature, not a bug...
• The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.