Question

I am trying to build a simple CSS only navigation bar for my site. This is it working fine in modern browsers:

And this is my CSS:

#nav{
    width:496px;
    height:45px;
    float:right;
    background-color:#bee199;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    margin-top:5px;
    border:1px solid #a09f9f;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
    #nav ul{
        list-style:none;
        text-align:center;
    }
    #nav ul .last{
        padding-right:0px;
        border-right:none;
    }
    #nav ul li.navsep{
        width:1px;
        height:44px;
        background-color:#a09f9f;
        padding:0;
        margin-right:10px;
    }
        #nav ul li{
            width:auto;
            height:44px;
            display: -moz-inline-stack;
            display:inline-block;
            padding-right:10px;
            margin-bottom:-16px;
        }
            #nav ul li a{
                font-family:Helvetica, Arial, sans-serif;
                font-size:20px;
                font-weight:400;
                text-decoration:none;
                color:#434342;
            }

HTML:

<div id="nav">
            <ul>
                <li><a href="principles.html" title="principles">Principles</a></li>
                <li class="navsep"><span></span></li>
                <li><a href="#edit" title="Our Services">Our services</a></li>
                <li class="navsep"><span></span></li>
                <li><a href="recent.html" title="Recent work">Recent work</a></li>
                <li class="navsep"><span></span></li>
                <li class="last"><a href="#edit" title="Contact Us">Contact</a></li>
            </ul>
</div>

One of my problems is using negative margins, I really don’t want to be using them. But every time I try to use conventional methods the text will not center vertically and it looks like this:

This also happens on older browsers.

Thanks for your time! If you need more information just ask! 🙂

Answer 1

1. Omit the <li class="navsep"> and use borders instead.

2. use lineheight on the li elements.