The Solution

As with most problems I encounter during web development I turned to google for the answers, I found many articles and methods dealing with the problem and tried several before finding the solution I was happiest with. To save you the trial and error I have decided to document my preferred method here.

The solution I am using combines 2 methods I found when searching google, the first handles png images in the html file and the second handles background images set via css.

ie6 png transparency for html images

The simplest implementation I found to handle png transparency for html images was the pnghowto from bobsola

Bobosola png how to

Unfortuntely, this method does not handle png transparency for png images displayed as background images via css.

I then continued my search and found the css only method below.

css only png transparency fix

This is the only method I found documented on the internet which can offer the desired png transparency support to older versions of internet explorer.

The method uses some css hacks and relies on the Alpha Image Uploader from microsoft. See below for links about the css only method and for documentation on Microsofts Alpha Image Loader

CSS Only PNG Transparency ie6 <
Microsoft Alpha Image Loader

At this point I thought my problems were over, however, when you use a png background image with transparency in ie6 the links in the div become un-usable

To get the links working again I discovered that setting the css style for the a in the div to relative position and setting the z-index does the trick:

mydiv a
{
    position: relative;
    z-index: 100;
}