Getting Transparent PNG to work in IE 6 in img tag

Question

Hi,

I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.

Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?

Answer 1

One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

Then the HTML would look like this...

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

The title tag will still work on the DIV so you should be okay on that part.

I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)

Answer 2

you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.

http://jquery.andreaseberhard.de/pngFix/

Answer 3

I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.

Answer 4

another option is to use htc for ie6 - see here for solution:

http://www.twinhelix.com/css/iepngfix/

only requires an extra line added to your css file - sorry still may require javascript - not too sure.

Answer 5

While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)

One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.

In short, visit this site: http://www.twinhelix.com/css/iepngfix/

I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave

Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.

Answer 6

IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.

Answer 7

I use to follow this tutorial, which is simple and perfectly works. Png fix for ie6 using css