a href in css overlay not working in IE

Our site has a css overlay for parent navigation, including an href in the overlay to link to the destinations.

It works fine in FF, Safari, etc. Only IE doesn't work.

Site: http://www.lifestyleandprosperity.com/zencart/
the parent nav buttons are: home, community, contact us, about us.

Relevant code below.

If I uncomment the red border, the overlay shows up in the right place, showing that the CSS functions properly.

So why won't the html <a href> links link properly - only in IE?

I'm basically a hacker, I can edit code but I'm not a css expert, so if you could please tell me what to add or replace that keeps the FF/Safari functioning still in tact, that would help.

Thank you!!
Confused girl

========

[CODE]

html lines:

<!--bof-ParentNavigationOverlay-->

<a class="overlay" id="home_overlay" href="http://www.lifestyleandprosperity.com/"> </a>
<a class="overlay" id="comm_overlay" href="http://www.lifestyleandprosperity.com/community.html"> </a>
<a class="overlay" id="prod_overlay" href="http://www.lifestyleandprosperity.com/zencart/"> </a>
<a class="overlay" id="contactus_overlay" href="http://lifestyleandprosperity.com/zencart/index.php?main_page=contact_us"> </a>
<a class="overlay" id="aboutus_overlay" href="http://www.lifestyleandprosperity.com/aboutus.html"> </a>

<!--eof-ParentNavigationOverlay-->


CSS code:

/* bof LNPnavigationBar */

#logoWrapper{
position:relative;
}

.overlay{
display: block;
position:absolute;
background:transparent;
/* border:1px solid red; */
}

#home_overlay{
top:53px;
left: 475px;
width:65px;
height:30px;
}

#comm_overlay{
top:53px;
left: 545px;
width:95px;
height:30px;
}

#prod_overlay{
top:53px;
left: 644px;
width:170px;
height:30px;
}

#contactus_overlay{
top:53px;
left: 815px;
width:100px;
height:30px;
}

#aboutus_overlay{
top:53px;
left: 919px;
width:82px;
height:30px;
}

/* eof LNPnavigationBar */

[CODE]

Hello mayagg,
It's funny, only a few days ago I made a page showing exactly this bug and how to deal with it and it still took me ten minutes of looking at your site to recognize it.

Have a look here (http://nopeople.com/CSS%20tips/empty_anchor/index.html) and see if this helps.

Ohhh, thank you so much. All I did was add this one line:

[CODE]
background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
[CODE]

to each block so that it was like this:

[CODE]
#home_overlay{
top:53px;
left: 475px;
width:65px;
height:30px;
background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
}
[CODE]

...and it worked absolutely like a charm.

THANK you!!!

Tested FF, Safari, IE, all look great.

Very very grateful,
Maya-G :):):)

Ohhh, thank you so much. All I did was add this one line:


background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
[CODE]

to each block so that it was like this:

[CODE]
#home_overlay{
top:53px;
left: 475px;
width:65px;
height:30px;
background: url(fakeimage.jpg); /*patch for bug in ie8, only affects ie8*/
}


I wonder if this wouldn't be easier -
.overlay{
display: block;
position:absolute;
background: url(fakeimage.jpg);
/* border:1px solid red; */
} You should get away with a single entry that way.

Either way, I'm glad you got it working. How funny I only just came across this odd bug last week or so.