CSS - Horizontal Lists Alignment

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect

Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems:

*trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down.

*getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes).

Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project.

Thanks in advance,
-b

Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows.

In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css.

So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things.

If i assume correctly:
If i use text-align - this is meant for text only
If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width

So is there any normal solution to this?

WordPress 3.0.4, multisite network enabled,
local installation with MAMP 1.9.4 (PHP 5.3.2)
WordPress Theme: Twentyten (child)
Browsers: FireFox 3.6.13, Safari 5.0.3

Problem: Have four divs within a container div. CSS validates. Moreover, the html & CSS do display without a hitch on a hand-coded website using HTML 4.01 Transitional//EN. They also display perfectly up at jsfiddle.net/EVErR.

However, the same code in a WordPress Page is behaving unexpectedly: the four divs are floating left, one after the other, but stepped down so that they resemble a staircase. See screenshot at imgur.com/ufw2i.

The CSS:
/* div layout for displaying 4 small boxes horizontal alignment */

div.box-container
{
display: inline;
margin: 0pt;
padding: 0pt;
width: 640px;
background-color: rgb(229, 231, 225);
position: relative;
float: left;
overflow: hidden;
}

div.small-box
{
border: 1px solid rgb(153, 51, 102);
margin: 20px 0px 20px 15px;
padding: 0.325em;
float: left;
display: inline;
vertical-align: top;
background-color: rgb(255, 244, 227);
width: 128px;
line-height: 0.85em;
max-height: 8em;
min-height: 8em;
position: relative;
}

HTML:

<div class="box-container">
<div class="small-box">SOME TEXT AND AN IMAGE</div>
<div class="small-box">SOME TEXT AND AN IMAGE</div>
<div class="small-box">SOME TEXT AND AN IMAGE</div>
<div class="small-box">SOME TEXT AND AN IMAGE</div>
</div>

What am I missing here? Help much appreciated!