Sliding Doors for tabbed nav - problem

problem with sliding doors for tabbed navigation

[luispunchy]

My first new thread here! Hoping for some quick review and suggestions - any input is much appreciated. I have a site in the *early* stages of development and I'm using the "sliding doors" technique for tabbed navigation.

Not sure if I'm allowed to post links and I can't find a way to send attachments (?), so below are some code snippets.

The nav container (#nav) temporarily has a yellow background just as a clear visual cue and it is not positioned on the page yet - so forgive the ugliness! - but the code for the actual tab effects is complete, or so I thought.

CSS:

/* horizontal main menu navigation */
#nav {
float:left;
width: 100%;
background: yellow; /*temporary color just for visual cue */
}

#nav ul {
margin: 0;
padding: 0 0 0 300px;
list-style: none;
}

#nav ul li {
float: left;
margin: 0;
padding: 0;
font: bold 1em/2em Verdana, Arial, Helvetica, sans-serif;
background: url(images/tab_right.gif) no-repeat top right;
}

#nav a {
float: left;
display: block;
margin: 0 10px 0 0;
padding: 5px 2px;
color: #fff;
text-decoration: none;
background: #284d73 url(images/tab_left.gif) no-repeat top left;
}

HTML:
<div id="nav">
<ul>
<li id="t-index"><a href="/" title="Gonzi's home page">HOME</a></li>
<li id="t-about"><a href="#" title="About Us">ABOUT US</a></li>
<li id="t-services"><a href="#" title="Our Services">OUR SERVICES</a></li>
<li id="t-fleet"><a href="#" title="Our Fleet">FLEET</a></li>
<li id="t-reserve"><a href="#" title="Reservations">RESERVATIONS</a></li>
</ul>
<!-- end #nav -->
</div>

Problem is two fold:
1. The 'a' elements are styled to 'display: block' to make the entire tab clickable, yet it isn't actually rendering this way, and I'm at a loss to explain why. Perhaps something obvious I'm just missing...

2. The 'tab_right.gif' background image (in 'li' elements) and the 'tab_left.gif' background image (in the 'a' elements) don't appear to be meeting up correctly, leaving an area with no image. Again, no idea why and I'm hoping a 2nd pair of eyes may find something I'm missing...

If it would help to see the actual implementation, I can send a URL - just let me know how to get that to you (email?).

Thanks for any suggestions!
luispunchy

[garann]

A couple of guesses courtesy of a guy named Occam and his shaving implement:

1. Maybe you should set a height and width for the 'a' elements?

2. Could it be that your images aren't wide enough to overlap properly?

Hope at least one of them helps...