title: HTML5 cross-browser issue; floating div and list
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div style="width:300px; height:300px; 
      background-color: Green; float:left; margin-right:3em;"&gt;&lt;/div&gt;
  &lt;ol&gt;
      &lt;li&gt;First&lt;/li&gt;
      &lt;li&gt;Second&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In Chrome 12 and Firefox 4, this renders a list to the right of the green square. In IE9 the <em>decimal numerals</em> are off to the left, overlapping the green square, while the <em>contents</em> of the ol is to the right of the green square.</p>
  
  <p>Here's a screenshot: <a href="http://i.stack.imgur.com/EO8Se.png" rel="nofollow">http://i.stack.imgur.com/EO8Se.png</a></p>
  
  <p>IE9 with compatibility mode renders the same as Chrome &amp; FF. </p>
  
  <ul>
  <li>Which browser is "correct"?</li>
  <li>Can you suggest markup that renders like Chrome &amp; FF in all browsers?</li>
  </ul>