Problem with IE6 Background Transparency

[blake1128]

HTML:

<div id="nav">
<ul id="navigation">
<li><a href="/" class="link1">Home</a></li>
<li><a href="/portfolio/" class="link2">Portfolio</a></li>
<li><a href="/services/" class="link3">Services</a></li>
<li><a href="/clients/" class="link4">Clients</a></li>
<li><a href="/contact/" class="link5">Contact Us</a></li>
</ul>
</div>


CSS:

#nav { height: 88px; }
#navigation { height: 88px; }
#navigation a { display: block; width: 120px; height: 88px; text-indent: -9000px; background-image: url(../images/nav-background.png); float: left; }
#navigation li { list-style-type: none; display: inline; }
#navigation a.link1 { background-position: 0px -88px; width: 198px; }
#navigation a.link1:hover { background-position: 0px 0px; width: 198px; }
#navigation a.link2 { background-position: -198px -88px; }
#navigation a.link2:hover { background-position: -198px 0px; }
#navigation a.link3 { background-position: -318px -88px }
#navigation a.link3:hover { background-position: -318px 0px; }
#navigation a.link4 { background-position: -438px -88px; }
#navigation a.link4:hover { background-position: -438px 0px; }
#navigation a.link5 { background-position: -558px -88px; width: 218px; }
#navigation a.link5:hover { background-position: -558px 0px; width: 218px; }

I have looked everywhere for html, css or java script to fix the png transparency in ie6.

Any help would be greatly appreciated

[KDLA]

Convert to transparent .gif.

[FourCourtJester]

http://www.twinhelix.com/css/iepngfix/

This is a common IE PNG fix, but there are still limitations, such as background-position and absolute positioning cannot be fixed =\

[blake1128]

Thank you for the tips, I will try