title: Why does white-space nowrap have no effect on LI's in Internet Explorer?
body: <p>I would like all my LI's to display on the same line, so I set each LI's display property to inline-block and set white-space = nowrap on the parent UL.  I get the expected non-wrapping behaviour in FireFox and Chrome, but IE8 ignores the nowrap and displays the items on underneath the other.</p>
  
  <p>Any idea what I am doing wrong?</p>
  
  <p>Here is the HTML and CSS...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt; 
              li
              {
                  display: inline-block;
                  list-style: none outside none;
                  padding: 0px 10px 0px 10px;
                  white-space: nowrap;
              }
              ul
              {
                  white-space: nowrap;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="float: left; width: 300px;"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      Menu 1
                  &lt;/li&gt;
                  &lt;li&gt;
                      Menu Menu Menu 2
                  &lt;/li&gt;
                  &lt;li&gt;
                      Menu 3
                  &lt;/li&gt;
                  &lt;li&gt;
                      Menu 4
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>