Links are disabled

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/"&gt;Client Login</a></li>
      <li><a href="https://clients.elektrikhost.com/submitticket.php"&gt;Support&lt;/a&gt;&lt;/li&gt;
      <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

it's because the

<div class="ref1"> <img src="images/ref1.png" alt="Ref" /> </div>

is over your links. why do you need that?

Answer 2

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.

Answer 3

It looks like that ref1 is causing the problem - it appears to be covering your links.

As a quick test maybe change the z-index to see if it is the problem.

.ref1 { position: relative; top: 8px; left: -2px; z-index: 99999; }

Answer 4

when i remove "position: relative;" property from "ref1" with firebug, links work.

Answer 5

Add z-index:-9999 to .ref1. tested in firefox only