Ненумерованный список для плавающего меню слева не может сделать перенос

Question

Приложение должно соответствовать 1024x768

У нас есть меню различной длины - иногда меню выглядит так ...

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

В других пользователях / ролях оно может иметь гораздо больше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><span>link 5</span></li>
   <li><span>link 6</span></li>
</ul>

и CSS выглядит следующим образом:

#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;
}  

На ul есть серый фон -> если ширина элементов превышает 1024px, элементы должны переноситьсяна следующую строку - и они делают, но серый фон не существует, за исключением достаточно странно в IE7 - очень раздражающая проблема.Любая помощь с благодарностью.

Answer 1

Поскольку вы перемещаете все в меню, IE неправильно распознает, что содержимое содержится в ul. Вы можете легко это исправить, добавив следующие правила:

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

Answer 2

Это звучит как проблема переполнения.Добавьте overflow: auto к вашему #menu стилю.В IE вам, вероятно, придется форсировать hasLayout, вы можете сделать это с помощью zoom: 1.