CSS tabs won't work as links

Question

here is the site i am having problems with http://www.iaddesign.com/avola

when i try to click on the tabs it wont work. i have a hover affect with css and cant figure out how to make the tabs work.

let me know thanks.

Answer 1

The link ( <a> ) tags within your li's need to have display:block to make use of the width and height rules. I just made the modification in firebug and it fixed the problem.

#navigation li a 
{ 
  display:block; 
}

Furthermore, I would suggest putting your links in the following format:

<li>
  <a href="index.php"><span>Index</span></a>
</li>

Then hide the inner spans from the visual-rendering:

#navigation li a span 
{ 
  display:none; /* or position:absolute; top:-2000px; */
}

This way, your navigation is still usable when CSS is disabled.

Answer 2

While Jonathan is correct, you might also consider adding invisible <span>s inside the <a>tags for accesibility.

Answer 3

Jonathan is right. Here's my additional 2 cents.

Your tab has the markup as:

<li id="home"><a href="index.php" title=""></a></li>

The default display behaviour for <a> is inline, which coupled with the empty content between the opening and closing tag for <a> meant that nothing is rendered visibly on the browser.

Answer 4

you also might want to put the backgrounds on the a elements (if you are supporting ie6) to avoid having to use javascript hacks to support :hover on non-a elements.