Welcome to Code Couch

Problems with anchors and alpha transparency filters in IE6

Posted by at 7:29am on October 21, 2008.

You can use alpha transparent PNGs in IE6 as described in How do I display alpha transparent PNGs across all browsers. There is a problem with implementing this solution – in Internet Explorer 6 links are no longer clickable when they are contained within an element with an alpha transparency filter applied.

The problem

Consider the following CSS and HTML code snippets that set up the problem with a link contained within a div that has an alpha transparency filter applied to it:

<style type="text/css">
.opaque { background: url(images/alphaTransparent.png) transparent no-repeat left top; }
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src=images/alphaTransparent.png);
}
</style>
<![endif]-->
...
<div id="parent" class="opaque">
    <span id="child">Lorem <a href="http://www.codecouch.com">ipsum</a> dolor.</span>
</div>
...

The parent element has a class opaque applied to it which puts an image on the background of the element. In Internet Explorer 6 only, the background image is removed and the proprietary filter property is used. The link inside the child span is no longer clickable in Internet Explorer 6.

The solution

Make sure the parent element (the element with the filter applied to it) doesn’t have the position property set on it, and the child element (the element with the link in it) has to have relative position.

The following addition to the above code will make the link clickable:

<!--[if IE 6]>
<style type="text/css">
#child { position: relative; }
</style>
<![endif]-->

Since it only has to apply for Internet Explorer 6, the “fix” can be enclosed within the conditional comment that targets just that browser. This doesn’t require any javascript to work (unlike other solutions that have been posted) and degrades properly.

Post to Twitter

Tags: , , ,

Comments

There are no responses to this post.

Leave a reply

Comments are closed for this post.