Unorderd list for menu float left can't make wrap

The application must fit 1024x768

We have a varied length menu - sometimes the menu looks like this...

<ul>
   <li><a>link 1</a></li>
   <li><a>link 2</a></li>
   <li><a>link 3</a></li>
 </ul>

In other users/roles it can have many more like this...

<ul>
   <li><span>link 1</span></li>
   <li><span>link 2</span></li>
   <li><span>link 3</span></li>
   <li><span>link 4</span></li>
   <li&开发者_StackOverflow中文版gt;<span>link 5</span></li>
   <li><span>link 6</span></li>
</ul>

and the css looks like:

#menu
{
   list-style-type: none;
   min-height: 30px;
   margin-bottom: 15px;
   background:#E5E5E5;
   padding-left: 35px;
   border-bottom:1px solid #CCC;
}
#menu li
{
   min-height:30px;
   border-right:1px solid #CCC;
   border-left:1px solid #FFF;
   padding:0px 10px;
}
#menu li span
{
   display: block;
}
#menu li, #menu li span
{
   float: left;
   height: 30px;
   line-height: 30px;
   text-align:center;
}  

There is a grey background on the ul -> if the width of the items exceeds 1024px the items should wrap to the next line - and they do but the grey background is not there except oddly enough in IE7 - very annoying issue. Any help greatly appreciated.

Because you are floating everything in the menu, IE does not properly recognise that content is contained with the ul. YOu can fix it easily by adding these rules:

#menu {
  overflow: hidden; // ensures container wraps child content
  zoom: 1; // needed to trigger hasLayout in IE6
}

This sounds like an overflow problem. Add overflow: auto to your #menu style. In IE you will probably have to force hasLayout, you can do this with zoom: 1.