Hover problem with CSS horizontal tabs

The hover only fully works in IE. In Opera/FF the effective hover area is a narrow margin near the bottom of the tab.

I've tried everything I can think of, but the results are the same.

Here is the HTML code:

<body id="intro">
<ul id="nav">
<li id="t-intro"><a href="/index.html">Home</a></li>
<li id="t-about"><a href="/about.html">About</a></li>
<li id="t-contact"><a href="/contact.html">Contact</a></li>
</ul>

Here is the CSS code:

body { font-size: small; background-color: #e0edfd; margin: 0; padding: 0; }

* html { font-size: x-small; /* for IE5/Win */ f\ont-size: small; /* for other IE versions */ margin: 0; padding: 0; display: block; }

#nav { float: left; width: 100%; margin: 0; padding: 10px 0 0 46px; list-style-type: none; }

#nav li { float: left; margin: 0; padding: 0; font-family: "Lucida Console", sans-serif; font-size: 85%; }

#nav a { float: left; display: block; margin: 0 4px 0 0; padding: 4px 8px; color: #333; text-decoration: none; border: 1px solid #9b8748; background: #F9E9A9; }

#nav a:hover, body#intro #t-intro a, body#about #t-about a, body#contact #t-contact a { color: #333; border-color: #727377; background: #fff; }

Hover problem with CSS horizontal tabs

IE works, Opera & FF have a problem

Storyman

Storyman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week