Internet Explorer 6 is notoriously rubbish at supporting PNG transparency resulting in images that appear with a grey background; not very useful. All is not lost. Angus Turnbull has created a work around for this issue. You can get all the information needed at this link http://www.twinhelix.com/css/iepngfix/, including support forums. This is possibly the easiest way to get full PNG transparency and importantly the technique works for CSS backgrounds, albeit when no used with the no-repeat attribute.

The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image.

To download this permanently: iepngfix.zip (15kb).

How to Implement

1. Put the iepngfix.htc file into your CSS directory
2. Put the blank.gif file into your CSS directory (otherwise you will need to edit the HTC file)
3. Edit your CSS to include the following line behavior:url(iepngfix.htc); for the <img> tag

Known Issues

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).

You should not apply other visual filters to the iamge with the PNG behavior because these other filters do not respect the alpha channels and the result will most likely not be satisfactory.

Alternatives

An alternative source that I recently discovered is found at the following link http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

The Web Accessibility Toolbar, provided by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS) , Australia, is a tool for advanced users or web developers, that helps to examine the structure, components and accessibility features of any given web page. It installs as an Internet Explorer (version 5+, Windows) toolbar and offers several integrated tools to inspect style sheets, tables, frames, images and more, as well as a wide variety of tests and features that are provide by other web sites, including link checks, HTML validation, page download speed, colour simulations, page resolutions and much more. A nice toolbox for web developers.

The toolbar can be downloaded via the following link: http://www.snapfiles.com/get/AccessibilityToolbar.html

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

• Identify components of a web page
• Facilitate the use of 3rd party online applications
• Simulate user experiences
• Provide links to references and additional resources

Much like Chris Pederic’s Web Developer Toolbar, which was popularised through Firefox, this toolbar can be used as an aid for manual checking of many of the Web Content Accessibility Guideline’s Checkpoints (WCAG) 1.0. None of the toolbar functions listed will tell you whether a page conforms to a particular checkpoint, but they will help you in assessing conformance.