IE6 png bug; links don't work? - internet-explorer-6

Question

After many hours I figured out why the links within my pngs in IE6 do not work.
It's because Im using filter:progid:dximagetransform.microsoft.alphaimageloader within my CSS. Yet after many more hours I have not found a solution to fixing these links.
Here is my code...
HTML
<div id="fullwidth-header-wrapper">
<div id="header"> <strong class="logo"> Google </strong>
<div id="nav">
<ul>
<span>
<span style="color: white;">Prefer</span>
Google? Click
here!
</span>
</ul>
</div>
</div>
</div>
CSS
#fullwidth-header-wrapper {
height: 120px;
}
#header {
background:url(../images/header-bg.png) no-repeat 50% 0;
height: 138px;
width: 980px;
margin: 0 auto;
position: relative;
top:0;
}
.logo{
background:url(../images/logo.png) no-repeat;
display:block;
width:500px;
height:125px;
position:absolute;
top:40px;
left:85px;
}
.logo a{
display:block;
width:323px;
height:85px;
text-indent:-9999px;
overflow:hidden;
}
#nav {
background:url(none.gif);
filter:progid:dximagetransform.microsoft.alphaimageloader(src='images/nav.png', sizingmethod='crop');
display: inline;
position: absolute;
top: -8px;
right: 30px;
width: 350px;
height: 75px;
z-index: 150;
}
#nav ul {
position: relative;
top: 18px;
left: 0px;
color: rgb(87, 175, 237);
font-size: 96.8%;
z-index:200;
}
#nav span {
color: #fff;
position: absolute;
top: 18px;
left: 0px;
font-size: 96.8%;
}
#nav a {color: rgb(255, 255, 255);}
How do you fix this issue or avoid this and suggestions re: a possible solution for the above?
Thanks!

Answer 1

Try this: http://www.hrunting.org/csstests/iealpha.html
In short:
What matters is that the element with the filter has no position set and the link within the filtered element has a position set. If that's the case, links within the filtered element will work.
Since your #nav element has position: absolute, you'll need to add a wrapper div around that and absolutely position that instead.

Answer 2

This is often a problem with using a png fix on something that contains links, the Alpha version of the twinhelix png fix has apparently solved this issue. I have used it, its a little buggy still or at least it was a few months ago, but used right on small sites it is production ready http://www.twinhelix.com/css/iepngfix/.
I normally use the twinhelix 1.0 script for all our sites, I include an ie6.css stylesheet with a conditional comment aimed at IE6:
<!--[if lt IE 7]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" charset="utf-8">
<![endif]-->
Inside there you then in the CSS you just call it using the 'behavior' rule. IE 7 and 8 do transparent png's just fine. You do need to make sure you have a blank.gif 1px by 1px transparent gif somewhere and update the htc file (which really is just JS) to link to the path of that image.
#nav {
behavior: url(/css/iepngfix.htc);
}
I hope this helps

Answer 3

I had a similar problem, I was using a transparent background so I had to apply the png fix. I had a div and a link around it, like this:
<div id="bla"></div>
The links were not working at all in IE6. When I applied position: relative to that bla div, it worked! position: relative seems to work wonders on IE6, as well as float: left sometimes...