Question

On my site:
http://elektrikhost.com/
When you try and click on a link, they are disabled. I think it is because of the 2 images that are at the end of the navigation bar. I tried to remove the images from the navigation but then the navigation falls apart. This is a site for a client and I must have those images in.

How can I get this to work?

My HTML:

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about-us.html">About Us</a></li>
      <li><a href="https://clients.elektrikhost.com/">Client Login</a></li>
      <li><a href="https://clients.elektrikhost.com/submitticket.php">Support</a></li>
      <li><a href="contact.html">Contact</a></li>

    </ul>
  </nav>
  <div class="ref2"><img src="images/ref2.png" alt="Ref" /></div>

CSS:

/* -- NAV -- */
nav { background: #282828 url(../images/nav-bg.jpg) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: -37px 0 -28px 0; }
nav ul { padding: 21px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 0 47px; margin: 0 8px 0 0;  }
nav ul li:first-of-type { background: none; }
nav ul li a { color: #626262; font: 1.2em Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }

.ref1 { position: relative; top: 8px; left: -2px; }
.ref2 { position: relative; top: -17px; left: 844px; }

Answer 1

Looking at the site with Firebug, I can see that the <div class="ref1"> overlaps the link text. It’s also (implicitly) at a higher z-level than the link text, so is preventing clicks going through.

I think that div contains just an image which is entirely to the left of the links, so if you set .ref1’s width so it doesn’t extend further right than it needs to, that should sort you out.