Question

I have a navigation bar/list that is using only HTML and CSS. The background image for the nav bar is 45px tall.

The list elements have been set with a CSS border-left property. I basically want to have a single vertical separator before each item in the list.

When I change the font in the list to around 30px the height of the border-left fills the 45px height of the div which is good. But when I set the size of the font smaller the border-left no longer fills the height of the div.

How can I set the font in the list small and yet still have the height of the border-left to 45px?

I have placed the code below. Thanks in advance

CSS:

#navbar{
    background-image: url('../images/navbar.png');
    color: white;
    font: 25px arial,sans-serif;
    height: 45px;
}
#navbar a{
    color: white;
    text-decoration: none;
}
#navbar ul{
    list-style: none;
    margin: 5;
    padding: 5;
}
#navbar li{
    border-left: solid 1px white;
    display: inline;
    padding: 1px 10px 1px 1px;  
    margin: 10px;
}   

HTML:

<div class="clear" id="navbar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Start</a></li>
        <li><a href="#">In Jouw Regio</a></li>
    </ul>   
</div>  

Answer 1

Here’s a solution:

http://jsfiddle.net/bQe6W/1/

I changed the following

#navbar li {
    display: inline-block;
    line-height: 45px;
    margin: 0 10px;
}

Also set the background of the div to gray so you can see the example!