Tuesday, 27 May 2008

IE6, AlphaImageLoader, and links

I too have hit the problem where links, that are inside elements with (a) absolute positioning, and (b) a background image loaded using AlphaImageLoader, are unclickable. Yet another annoying IE6 bug!  The sooner that browser is dead, the better...

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:

Jason K. said...

Thanks for this! Really helped me out!