IE8 - navigation links do not work

Question

Hey, that’s it - I searched as much as possible, but nothing helps me.

I work on a website (www.philipdukes.co.uk), and although navigation seems to work fine in FF, Safari, chrome, even IE6 (by a miracle), on my system it fails in IE8 here: navigation links are not work.

I find them, get the rollover animation, but they are not "clickable". These are basic text links aligned on screen text, and then the area they represent should be interactive. The image filling the space is not a link. If I delete the image, I can click the area, and if I remove the alignment of the text, I can click the link text (but only the link text).

It drives me crazy, as this is the last thing I need for everything to work to the end ...

The code for the navigation 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 css style here (any optimization is also welcome here!):

    /*
*
*   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 lacking:

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

This should solve the problem. Always set the vertical ( topor bottom)) and horizontal ( leftor right) placement when using position:absolute.

UPDATE

At any time, when installed background, it starts working as expected. Due to the large number of tests you are likely to find another way to solve the problem. But this is what I would do:

:

• img , background-image a.
• position a relative absolute, div

QUICK WAY

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

shim.png - 8- PNG . 8- PNG- , (1 ) gif, , .

Answer 2

IE8, IE7, :

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

IE8 IE7. IE7, , .

Answer 3

, , , , - (, IE8) . z-index of .nav img, .nav2 img 50, .

I am not sure if this is a practical possibility in this case, since a negative z-index may cause the images to no longer be visible.