What are IE6 transparency fix methods?

HTML & CSS
1

Is there a website that documents all the different methods for correcting IE6 transparency issues.

I have tried several different ways but the don’t seem to work.

Thanks

2

In essence there is only one way to fix IE6’s transparency issues and that is to use the alpha image loader filter.

There are however many javascript fixes which will apply the filter automatically for you and the one I use if I have a lot of images to use is here.

The alpha image loader is not a substitute for the background property and has no position or repeat properties and uses special attributes that will crop scale or revert to image size.

The latest version of the twin helix fix linked to above addresses these issue via JS so that you can use repeat and position. (Many other js fixes do not allow this.)

The main problem is that when you apply a transparent image to a positioned element (relative or absolute) then links in that element become un-clickable. You need first to position the element and then nest an inner non-positioned element at that point and then apply the image to that inner element.

Therefore you need to design with this in mind if you want to support ie6.

3

Hi Paul,

Do you know of a working example that I can examine?

Thanks.

4

Like this


<a href="#" style="position:relative;"><span style="background-image:(pngImage.png);">text</span></a>

Inline styles for example only :slight_smile:

5

There’s a nifty jQuery fix for this, also:

http://allinthehead.com/retro/338/supersleight-jquery-plugin

6

This is an old example.

It’s best not to have the anchor as the parent because the position:relative in the anchor will cause problems also.