Problem with nav in IE 7

[nic]

Hi,

I have a menu on a website that is not working very well in Internet Explorer 7. See below information. Any suggestions would be much appreciated.

Thanks

Website: www.nicjonesdesign-wip.com/aquaclear/index.php

Link to screen shot of how it looks in IE7:

http://www.nicjonesdesign-wip.com/screenshot.png



<div id="menu_container">

<div id="menu">

<ul>
<li id="nav_home"><a href="index.php">Home</a></li>
<li id="nav_contracting"><a href="contracting.php">Contracting</a></li>
<li id="nav_sales"><a href="sales.php">Truxor Sales</a></li>
<li id="nav_clients"><a href="clients.php">Clients</a></li>
<li id="nav_latest_news"><a href="latest_news.php">Latest News</a></li>
<li id="nav_contact"><a href="contact.php">Contact Us</a></li>
</ul>

</div>

</div>



#menu_container {
background-image: url("../images/bg_menu.gif");
height: 38px;
width: 100%;
}
#menu {
border-left: 1px solid #004177;
height: 32px;
margin: 0 auto;
width: 984px;
}
#menu ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#menu ul li a {
border-right: 1px solid #004177;
color: #FFFFFF;
float: left;
height: 22px;
padding: 10px 0 0;
text-align: center;
text-decoration: none;
width: 120px;
}
#menu ul li a:hover {
background-color: #004177;
background-image: url("../images/bg_menu_arrow.png");
background-position: center 0;
background-repeat: no-repeat;
}

[nic]

Problem solved by simply adding:

#menu ul li{
float:left;
}