Problem with Horizontal scrolling area in IE?

Question

I have the following markup:

<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>

With the following CSS:

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

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

I have some javascript with scrolls the #routes div.

The ul.routesList list items render horizontally and overflow but in IE they wrap and overflow vertically in IE?

I have tried using word-wrap but no luck!

Are there any IE quirks going on here or is there something wrong with my CSS/HTML??

Thanks

Answer 1

You've put an id on your list, but referenced it by class in your CSS - I've put some working CSS below that makes this work as you describe in IE and 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;
}