Проблема с горизонтальной областью прокрутки в IE?

Question

У меня есть следующая разметка:

<div id="routes">

<ul id="routesList">
  <li class="routes">Route 1</li>
  <li class="routes">Route 2</li>
  <li class="routes">Route 3</li>
</ul>

</div>

Со следующим CSS:

#routes {
     height:20px;
     width:770px;
     overflow:hidden;
 }

ul.routesList{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    width:auto;
}

У меня есть некоторый javascript со свитками в разделе #routes.

Элементы списка ul.routesList отображаются горизонтально и переполняются, но в IE они оборачиваются и переполняются вертикально в IE?

Я пытался использовать перенос слов, но не повезло!

Есть ли здесь какие-то причуды IE или что-то не так с моим CSS / HTML ??

Спасибо

Answer 1

Вы поместили идентификатор в свой список, но сослались на него по классам в своем CSS - ниже я поместил несколько рабочих CSS, которые делают эту работу такой же, как вы описали в IE и Firefox.

#routes {
     height:20px;
     width:770px;
     overflow:hidden;
      background-color: Aqua;
 }

#routesList{
    margin:0;
    padding:0;
    list-style:none;
    width:auto;
}

#routesList li {
    float: left;
    width: auto;
    padding: 0 10px;
}