IE8 - navigation links not working

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开发者_如何学JAVA: 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;
}

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.

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.

Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.

I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.