Home/ Questions/Q 865149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:35:45+00:00

I’ve been able to do this in Chrome and Firefox, and I thought I

  • 0

I’ve been able to do this in Chrome and Firefox, and I thought I had it working in IE7 and IE8, but alas, I must’ve been dreaming.

Basically I have the following HTML:

<style>
div,li,ul {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
ul,li {  
    list-style: none;
}
div#container {
   display: inline-block;
   width: 600px;
   height: 120px;
   border: 1px solid lime;
   overflow: auto;
   position: relative;
}
div#container > ul {
   display: inline-block;
   width: auto;
   white-space: nowrap;
   vertical-align: top;
   position: absolute;
   left: 0px;
   top: 0px;
}
div#container > ul > li {
   display: inline-block;
   width: 100px;
   height: 100px;
   border: 1px solid red;
}
</style>
<div id="container">
   <ul>
      <li>Item 0</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
   </ul>
</div>

And I want it to look like this:

(from Firefox)
Firefox Example

(from Chrome)
Chrome Example

instead it looks like this:

(from IE8)
alt text

I’m at my wits end with this, and I’m considering doing some table layout hackery to fix it. But I’d rather not do that if I don’t have to.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Nevermind, I got it… stupid IE incompatibilities. Basically it didn’t like my selectors. So I had to add a class to the ul tag and do things that way.

    <style>
div,li,ul {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
}
ul,li {  
    list-style: none;
}
div#container {
   display: inline;
   width: 600px;
   height: 120px;
   border: 1px solid lime;
   overflow: auto;
   position: relative;
}
div#container ul.first {
   display: inline;
   width: auto;
   white-space: nowrap;
   vertical-align: top;
   position: absolute;
   left: 0px;
   top: 0px;
}
div#container ul.first li {
   display: inline;
   width: 100px;
   height: 100px;
   border: 1px solid red;
}
</style>
<div id="container">
   <ul class="first">
      <li>Item 0</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
   </ul>
</div>
    • 0