Horizontal Navigation bar looks stepped in IE

HTML & CSS
1

I’m new to CSS after years of using tables - yes I know I should have done this years ago - I have my Sitepoint book!

I’ve got a very simple 5 box horizontal navigation bar that works fine until I look at it in IE. In IE (8.0) each box is stepped down from the one beside it to make a little stairway going down from left to right. See attached image.

A strange thing is that it does this on my 2 laptops, but it works fine on my desktop, with the same version of IE.

I have searched for and tried allsorts of “IE bug fixes” for horizontal menus to no avail.

I’m doing the site within CMS Made Simple so the css code might not be visible - It’s below, but the web page with the problem is:

The CSS code for the navigation bar is:
/* START OF HORIZONTAL NAVIGATION BAR */

ul#menu_horiz {
list-style-type: none;
margin:0;
padding:0;
overflow:hidden;
}
#menu_horiz li a {
float:left;
font-size: 90%;
display: block;
color: white;
text-decoration: none;
background-color: #09553F;
padding: 4px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3574A7;
width:166px;
}
#menu_horiz li a:hover, #nav li active, #nav li focus {
color: #123464;
background-color: #9FAB81;
text-align: center;
background-position: center center;
}
/* END OF HORIZONTAL NAVIGATION BAR */

It will be my inexperience that’s caused this - could it be something to do with the header container that this navigation bar is in rather than the bar itself?

Any (constructive:-) advice will be gratefully accepted.

2

It would be better to put the float: left and width settings on the LIs rather than the <a>s.

3

Thanks, I created a li on it’s own, put the width and float in it and it works! Strangely though I had to increase the width to make the menu full the space.

4

I guess that accounts for the padding on the <a>s. It was adding to the width of each LI when there was a width on the <a>s, but with them being widthless, the padding doesn’t add to the width. So add the combined left/right padding of the original <a>s to the width of the LIs.