IE6 Issue - Need to get this menu to work with PNG images


I have a menu system which is a bit hard to explain so i’ve attached a mockup as a demonstration.
I have it working in all browsers except IE6. I am using PNG images for the links (sprites) and relative/absolute positioning. When a link is hovered over some text appears that is set in a <span> tag which is set to display:none; as default.
The hover works ok in IE6 but when i apply the Alpha Image Loader Hack for IE6 to remove the opaque background on the PNG’s the hover no longer works.

Any ideas what i can do to solve this?

Here’s the css…

#info {
   background: url(images/nav-bg.jpg) no-repeat; 
   margin: 16px 0 0;
   padding: 0;
#info ul {
#info img {border:0;}
#info li {margin: 0; border: 0; padding: 0;}
info li a {display:block; padding: 0 ;margin: 0;text-align:center; text-decoration:none; color:#000; outline: none;}
#info a em, #info a span {display:none;}
a#link1 {background:transparent url(images/nav01.png) no-repeat 0px 0px; width:284px; height: 144px; position: absolute; top: 0px; left: 0px;}
a#link2 {background:transparent url(images/nav02.png) no-repeat 0px 0px; width:284px; height: 91px;position: absolute; top: 144px; left: 0px;}
a#link3 {background:transparent url(images/nav03.png) no-repeat 0px 0px; width:284px; height: 144px;position: absolute; top: 235px; left: 0px;}
a#link4 {background:transparent url(images/nav04.png) no-repeat 0px 0px; width:284px; height: 144px; position: absolute; left: 532px; top: 0px;}
a#link5 {background:transparent url(images/nav05.png) no-repeat 0px 0px; width:284px; height: 91px; position: absolute; left: 532px; top: 144px;}
a#link6 {background:transparent url(images/nav06.png) no-repeat 0px 0px; width:284px; height: 144px; position: absolute; left: 532px; top: 235px;}

a:hover#link1, a:hover#link3 {background-position: 0px -144px;}
a:hover#link2 {background-position: 0px -91px;}
a:hover#link4 {width:284px; height: 144px; position: absolute; left: 532px; top: 0px; display: block; background-position: 0px -144px;}
a:hover#link5 {width:284px; height: 91px; position: absolute; left: 532px; top: 144px; display: block; background-position: 0px -91px;}
a:hover#link6 {width:284px; height: 144px; position: absolute; left: 532px; top: 235px; display: block; background-position: 0px -144px;}

a:hover#link1 span, a:hover#link2 span, a:hover#link3 span, a:hover#link4 span, a:hover#link5 span, a:hover#link6 span
{display:block; position:absolute;width:248px; height:292px; text-align: center;}
a:hover#link1 span {left:284px; top:129px;}
a:hover#link2 span {left:284px; top:-15px;}
a:hover#link3 span {left:284px; top:-106px;}
a:hover#link4 span {right:284px; top:129px;}
a:hover#link5 span {right:284px; top:-15px;}
a:hover#link6 span {right:284px; top:-106px;}

and the html:

   <div id="info">
               <li><a id="link1" href="#" title="#"><em>Link one</em><span>some text here link 1<br />and another line<br />or two</span></a></li>
               <li><a id="link2" href="#" title="#"><em>link two</em><span>some text here link 2</span></a></li>
               <li><a id="link3" href="#" title="#"><em>link three</em><span>some text here link 3</span></a></li>
               <li><a id="link4" href="#" title="#"><em>link four</em><span>some text here link 4,<br />and yet more text <br />and another line</span></a></li>
               <li><a id="link5" href="#" title="#"><em>link five</em><span>some text here link 5</span></a></li>
               <li><a id="link6" href="#" title="#"><em>link six</em><span>some text here link 6</span></a></li>

Thank you for any help


Hello, it’s a pain, but you have to attach the background images to another element other than the anchor. Then you can apply the png fix to that without breaking your anchor. I did this same thing here if you want to dig through the code - I don’t again.

<li><a href=“#”><b></b></a></li>


Thanks for your reply.

I got it sorted by using instead of the Alpha Image Loader…

<style type=“text/css”>
/* USAGE: All you have to do is include this one line in your CSS file, with the tag names to which you want the script applied: /
.logo img, #info { behavior: url( }
Alternatively, you can specify that this will apply to all tags like so: * { behavior: url( } */

…That way i could make the background PNG’s behave in IE6 but the drawback being I then had to pass IE6 a separate stylesheet using transparent gifs.
It’s been a bit more work but it all works as expected now.

Thanks again for your response

Your welcome, but if your using gifs, then why the need for iepngfix?

I’m using a background png image for the entire menu. The menu tabs have a shadow on them so it means the shadow will still show with the gifs overlaid. I’ve had to absolutley position the tabs over the background png.
The reason i want complete transparency for the entire menu is because the client wants to have multiple themes so it will save on the image slicing.

Hi, for one thing you were doing your hovers wrong so that may be why they weren’t working. You had this
a:hover#link1, a:hover#link3

The ID must come before the pseudo.
a#link1:hover, a#link3:hover

Hi Ryan,

Are you sure about that?
I’ve used this before and never had a problem.
my code is still as it was: a:hover#link1


Yes I am sure that hte ID should be before :hover.