CSS - Frustrating IE7 li's

[g0bbles]

Hi All...

Spending far too long fixing a simple display issue... If anyone knows the solution please feel free to post. Details below:

Top Menu in Chrome / Firefox:
http://i.imgur.com/4IO7z.png

Breakage in IE7... Fine in IE8 however..
http://i.imgur.com/Ta1oI.png

Does anyone have a fix for me. The Code displaying that particular section is listed below:


HTML

<div id="navwrapper">
<ul class="menu">
<li id="current" class="active item1"><a href="#"><span>Home</span></a></li>
<li class="active item2"><a href="#"><span>Company Info</span></a></li>
<li class="active item3"><a href="#"><span>Products</span></a></li>
<li class="active item4"><a href="#"><span>MSDS &amp; Safety</span></a></li>
<li class="active item5"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

CSS

#navwrapper {
    width: 1000px;
    height: 75px;
    background: URL('../images/menubg.gif');
}

#navwrapper ul {
    list-style-type: none;
    color: #ffffff;
    position: relative;
    top: 35px;
}

#navwrapper ul li a {
    list-style-type: none;
    float: left;
    display: block;
    padding: 10px 25px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 2px 2px #686868;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
}

[TheChemist]

Post your item1 item2 ... item5 classes

Also there's a big fuckin typo on your main image.

"No matter what business YOU'RE in"

[g0bbles]

Oh awesome... Lol thats gold, thanks for picking that one up..

With regards to the styles on the class item#..... it is a feature from the CMS allowing individual styling of those items - There are no styles assigned at present to those items

[hoiquai]

#navwrapper ul li a {
    list-style-type: none;
    float: left;

You have to be careful to apply the correct CSS to the appropriate tags, list-style:none does not apply to an <a> tag at any time.
Technically the IE7 browser is rendering it right as you have floated the a tag and not the li tag, and li being a list item should start on a new line by default, some browsers will compensate for CSS problems but others can be picky.

Instead of floating the a tag like you are doing above, try floating the li tag like below

#navwrapper ul li {
    list-style-type: none;
    float: left;
}

#navwrapper ul li a {
    display: block;
    padding: 10px 25px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 2px 2px #686868;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
}