Question

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)