[RESOLVED] Yet another thread about PNG opacity...

[jochem]

Hi y'all,

Like so many others, I too am struggeling with PNG opacity in IE6.

I am using PNG images as links in an unordered list in a CSS layout.
Each link has its own image, and the images have different sizes.

Here's the link (http://www.alpinetrekking.com/noxqq).

I have tried several options, but none is working perfectly.
<li> 1 is of course how it should be, but it fails in IE6.
<li> 2 works, but the link fails on the transparent sections of the image.
<li> 3 works just as LI 2, plus the underline on hover fails.

I've also tried the solution in this (http://www.webdeveloper.com/forum/showthread.php?t=125373#post655131) thread, but it didn't work for me. Then I tried a nice PHP sollution I found, but I cannot get it to work either.

Who can help me out?

:rolleyes: Jochem


<style type="text/css">
#TABS {z-index:2; top:100px; left:25px;}
#TABS ul {margin:0; padding:0; float:left; list-style:none;}
#TABS li {margin:0; padding:0; float:left; list-style:none;}
#TABS img {border:none;}
#TABS li a {display:block;}
html>body #TABS li a {width:auto;}
#TABS li a:hover {border-bottom:3px solid #de0000;}
#LINK-1 a:hover {border-bottom:3px solid #de0000;}
#LINK-1 {width:101px; height:40px; cursor:hand;
background:url('_img/tabs_0_millennium.png') no-repeat 0 0 !important;
background:none; filter:none !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabeled='true', src='_img/tabs_0_millennium.png', sizingMethod='image');}
</style>


<div id="TABS">
<ul><li><a href="#"><img src="../img/image.png"></a></li>
<li><a href="#"><div id="LINK-1"></div></a></li>
<li id="LINK-1"><a href="#"></a></li>
</ul>
</div>

[jochem]

Problem solved :)