Hope someone can help with this, but I haven’t quite got a navbar working as it should using CSS.

I have a version working using tables which is here :

table version

And this is the CSS version as it currently stands :

CSS version

The problems being the navlist doesn’t seem to sit in the navcontainer, and the list items have a gap to their left.

The CSS currently looks like :

#navcontainer ul
{
padding: 0;
margin: 0;
background-color: #876220;
color: White;
width: 100%;
height: 17px;
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 11px;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #876220;
color: White;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #005324;
color: #fff;
}
#wrapper img {display:block; border: 0px; padding: 0px;}
#navlist {border: 0px; padding: 0px;}

Hopefully the site isn’t so complicated that it will really suffer using tables, but I guess the mantra is to use CSS as much as possible, so having it so close it would be good to crack it!

Cheers,
Iain

I’ve run into this a few times too…frusterating. However, I’ve gotten it to work with a simple fix. Try adding a margin-top to your #navcontainer ul li a of (looks like) 2-3pixels. This way it should bump it down to sit where it needs to. Be careful though, the almighty browser demon (IE) might look at it differently. If that is the case you can always do a conditional statment if absolutely needed. Examples of that can be found here: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

As for the spaces in between, make sure you don’t have spaces in your code after the tag itself.

Hopefully this helps, but if you are still having issues, please post the code so we can review it and dissect it further.

:)