Dropdown navbar with Custom ends

[Willis]

Working on trying to make a nav bar similar to the image below. Pure photoshop in this version:

[desmond.imageshack.us...]

I razor-ed up the image in these parts:

1) nav_none.jpg -- 1px Standard background non-mouseover.
2) nav_over.png -- 1px Mouse-Over (darker color) image.
3 & 4) nav_left_none.png nav_left_over.png Rounded corner plus excess for left fields. No-Mouseover && On-Mouseover.
5 & 6) nav_right_none nav_right_over -- Similar to Above.
7)nav_spacer.jpg -- 1px Vertical line between links.


I've managed to (minus IE browers, one more hurdle) get most of the bar functioning, except for the vertical spacers. My problem is if I un-comment the two code lines (nav li && nav a:link) I get my spacers but I'm stuck with the spacer graphic bleeding behind my two rounded corners.

HTML:

<ul id="nav">
 <li id="nav-home"><a href="#">Home</a></li>
 <li id="nav-home"><a href="#">Announcements</a></li>
 <li id="nav-about"><a href="#">Programs</a></li>
 <li id="nav-archive"><a href="#">Calender</a></li>
 <li id="nav-lab"><a href="#">About</a></li>
 <li id="nav-reviews"><a href="#">Hours</a></li>
 <li id="nav-contact"><a href="#">Contact Us</a></li>
 </ul>

CSS:

#nav {
 margin:0px;
 padding:0px;
}
#nav li {
 display:inline;
 padding:0px;
 float:left;
 <!--background:url(images/nav_spacer.jpg) 0 0 repeat-x;-->
 width:auto;
 text-decoration:none;
 font:bold 1em/1em Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 text-shadow: 2px 2px 2px #555;
 height:43;
}

#nav a:link, #nav a:visited {
 padding:10px 20px 0px 20px;
 float:left;
 background:url(images/nav_none.jpg) 0 0 repeat-x;
 width:auto;
text-align:center;
color:#ffffff;
 text-decoration:none;
 font:bold 1em/1em Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 text-shadow: 2px 2px 2px #555;
 height:43;
<!--margin-right:1px;-->
}
.nav {
padding-right:12px;
 background: url(images/nav_left_none.png) top left repeat-x;
}

#nav li:first-child a {
 margin-left:1px;
 background: url(images/nav_left_none.png) top left repeat-x;
padding-left:26px;
font-variant:small-caps;
}
#nav li:first-child a:hover, #nav li:first-child a:focus {
 margin-left:1px;
 background: url(images/nav_left_over.png) top left repeat-x;
padding-left:26px;
 text-decoration:underline;
font-variant:small-caps;
}

#nav li:last-child a {
 background: url(images/nav_right_none.png) top right repeat-x;
padding-right:26px;
}
#nav li:last-child a:hover, #nav li:last-child a:focus {
 background: url(images/nav_right_over.png) top right repeat-x;
padding-right:26px;
}
#nav a:hover, #nav a:focus {
 color:#fff;
 background: url(images/nav_over.png) 0 0 repeat-x;
 text-decoration:underline;
}

My options feel limited, I go stop using the corners but the sites design hinders on avoiding a boxy, business theme. And I've gone the route of a list as later on (if someone can help me with THIS task I'd love ya) I want to have a drop-down list for the links.

Am I barking up the wrong tree? Or missing something obvious?

[Willis]

I've also tried to keep the rounded corners separate files and outside of the list, but page breaks complicate that too.

[londrum]

if it was me, i would combine all the images into one.

you dont need a background image for the button, plus another image for the vertical spacer. you could just combine them into one, and add the spacer to the right edge of the background image. that would save a lot of faffing about.
for the links at either end of the navbar, that don't need a vertical spacer, just make them 1 pixel thinner, so it doesn't appear.

you could also combine the background image with the hover version, as a CSS sprite. have a search for "CSS sprite", and see how can merge them all into one

all that CSS you've got that reference the

last-child

might be alright on today's browsers, but i think it might cause you problems on older versions of IE because it wont work. it's probably best to scrap that stuff, and put the rounded corners straight onto the <ul> element instead. you won't need last-child for that