Home/ Questions/Q 5944387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:31:49+00:00

<!DOCTYPE html> <html> <body> <div style=width:300px; height:300px; background-color: Green; float:left; margin-right:3em;></div> <ol> <li>First</li> <li>Second</li>

  • 0
<!DOCTYPE html>
<html>
<body>
<div style="width:300px; height:300px; 
    background-color: Green; float:left; margin-right:3em;"></div>
<ol>
    <li>First</li>
    <li>Second</li>
</ol>
</body>
</html>

In Chrome 12 and Firefox 4, this renders a list to the right of the green square. In IE9 the decimal numerals are off to the left, overlapping the green square, while the contents of the ol is to the right of the green square.

Here’s a screenshot: https://i.stack.imgur.com/EO8Se.png

IE9 with compatibility mode renders the same as Chrome & FF.

  • Which browser is “correct”?
  • Can you suggest markup that renders like Chrome & FF in all browsers?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Chrome and firefox are correct although this is quite subjective.

    You can try to put a <div> around your <ol> and float that left too :), or just try to use inline-block.

    • 0