Tutorials

Addressing the IE6 lack of PNG support (including problem links).

Internet Explorer 6 has issues with PNG rendering, causing links ('a' or 'anchor' tag) not to work if a PNG is set as a CSS background element.

Fixing PNG used in img tags.

The problem is not so bad with the release of Internet Explorer 7, with PNG support. However there are still too many people people using Internet Explorer 6 to ignore the issue.

The easiest way to fix the initial lack of support in IE6 is to include a JavaScript file to parse the PNGs used properly. Download pngfix.js. This excellent script comes straight from http://homepage.ntlworld.com/bobosola/index.htm.

The best way to include this script is using conditional comments to target the browsers IE6 and below. The following code for example (correct the path to wherever your JavaScript is stored on your web server):

<!--[if lt IE 7]>
<script defer type="text/javascript" src="path/pngfix.js"></script>
<![endif]-->

Fixing PNGs used in CSS backgrounds.

The following code is enough to fix this. The path must be as is from the html the CSS is used in however, NOT the path from the CSS file itself:

background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='path/image_name.png', sizingMethod='crop');

Place this code in a seperate CSS file which can be linked to within the conditional comments as above. The CSS must be loaded after the standard use of the background property.

Fixing the links on PNG backgrounds.

This is the problem I have had the most problems with. However thanks to a couple of internet searches (sorry authors - I can't find them again, contact me if you have a solution I may have used!) and my colleague who we shall call Dan (because that's his name) we have a solution.

All you need to do is add the following CSS to any links with PNG backgrounds:

a {
position: relative;
z-index: 1;
}

Although this should be enough, if this isn't working, then Dan pointed out that by adding the width and height properties to the CSS rule, everything should work as expected!