IE8 - navigation links not working

Question

Hey all - I've been googling this as much as possible, but nothing I do seems to help.

I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.

I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).

It's driving me nuts, as its the last thing I need to sort before everythings fully working...

The code for the nav bar is here:

    <div class="navHolder">
    <div class="nav current-home">
        <div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div>
        <div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div>
        <div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div>
    </div>
    <div class="nav2 current-home">
        <div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div>
        <div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
        <div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div>
  </div>

and the css styling is here (any optimization here is also welcome!):

    /*
*
*   BEGIN NAV SECTION
*
*/
.navHolder{
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
}
.nav, .nav2 {
    width: 600px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
    position: absolute;
    top: 0px;
    overflow: hidden;
    width: 200px;
    height: 50px;
    background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
    position: absolute;
    z-index: 100;
    display: block;
    top: 0px;
    height: 50px;
    width: 200px;
    text-indent: -9000px;
}
.nav img, .nav2 img{
    position: relative;
    z-index: 50;
    width: 200px;
    height: 50px;
}
#home, #press{
    left: 0;
}
#bio, #pdr{
    left: 200px;
}
#media, #contact{
    left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
    background-position: 0 -246px;
}

Answer 1

You are missing:

.nav a, .nav2 a  {
    left: 0;
}

That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.

UPDATE

Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:

BEST WAY:

1. Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
2. Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div

QUICK WAY

.nav a, .nav 2 { background: url(/images/shim.png) }

Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.

Answer 2

Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.