views:

1998

answers:

3

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"> <a href="#">Google</a> </strong>
 <div id="nav">
   <ul> 
<span>
<span style="color: white;">Prefer</span>
Google? Click
<a href="http://google.com"&gt;here!&lt;/a&gt;
</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!

+6  A: 

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.

mercator
I can confirm that this works for text boxes as well. Great find!
Jerph
This works! As the links says surrounding div has no position setand the link has to have position: relative
Eduardo Molteni
A: 

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

Natalie Downe
A: 

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:

<a href="#"><div id="bla"></div></a>

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... Damn IE6, it's dying too slowly!

Edda