Anyway, I seem to have fixed the problem (thanks to others out there, especially Stu Nicholls and Drew McLellan, with their fix descriptions) by adding another div within the original absolute-position-and-semi-transparent-background div and to contain the link(s). This div has no use in other browsers, but in IE6 I apply the AlphaImageLoader background to that one, turning off the background-image on the original div. Since the AlphaImageLoader background is no longer applied to an absolutely-positioned element, all is well again, and links are clickable in IE6!
<div class="withbackground">
<div>
<a href="http://www.example.com">Link here<a>
</div>
</div>
The normal style sheet has what you'd expect for absolute positioning and a semi-transparent PNG background image:
.withbackground {
position: absolute;
top: 10px;
left: 20px;
background-image: url(images/semi-transparent.png);
}
and then, in an IE6-only additional style sheet, we turn off the original PNG, and apply it using AlphaImageLoader to the child div, which isn't positioned:
.withbackground {
background-image: none;
}
.withbackground div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi-transparent.png', sizingMethod='image');
}
and with all that in place, the page works in every decent browser, and also in IE6!
1 comment:
Thanks for this! Really helped me out!
Post a Comment