Internet Explorer not incrementing number for non-sibling <li> elements

Question

I've got some html that looks like this:

<ol>
  <div>
    <li>one</li>
  </div>
  <div>
    <li>two</li>
  </div>
  <div>
    <li>three</li>
  </div>
</ol>

Which looks like this in Chrome/Firefox: 1. one 2. two 3. three

But looks like this in IE: 1. one 1. two 1. three

If I change the code so that the li element is the parent of the div element instead of the other way around (so that all the li elements are siblings) IE renders it correctly. Anyone know what causes this or if this is the intended working behavior of IE? Furthermore is one way technically more correct than the other?

<div><li></li></div> VS. <li><div></div></li>

Thanks, David

Answer 1

Your HTML is not valid. First of all the number that appears is default presentation from the browser, but is not a functional convention of HTML. Secondly, validate your code and the problem will be self explanatory.

Answer 2

Quite simply, <div> directly inside <ol> is not valid, so the secons option is better.

The specifications are clear here, <ul> and <ol> can only have <li> elements. It is best to write HTML that follows the standard - when you don't, browsers are more likely behave unexpectedly.

Answer 3

Surrounding a LI tag with anything is incorrect. UL and OL can only contain LI tags. LI tags can contain anything.

http://www.w3.org/TR/1999/REC-html401-19991224/struct/lists.html