Search code examples
htmlinternet-explorer-9html-lists

Ordered list showing all zeros in IE9


I have an <ol> (ordered list) and in FF, Safari, Chrome it is rendered correctly. However in IE9 it is showing all zeros. It is not a spacing/padding issue because I am able to see the zeros.

My HTML is as follows:

<ol> 
    <li>Enter basic company information</li> 
    <li>Select from our portfolio of products</li> 
    <li>Attach your employee census</li> 
    <li>Review your selections and submit your request.</li> 
</ol>

Anyone run into that problem and hopefully a solution?

ol issues


Solution

  • Update 3/20/2012 - Fixed in IE10

    This regression has been fixed in Internet Explorer 10 (all document modes). Microsoft has deleted the Connect entry, so you cannot review its status. Since Microsoft now pushes IE10 down automatically, it should be working for all your regular customers.


    This is a known IE9 regression, which has been reported on Microsoft Connect:

    Ordered list numbering changes from correct to 0, 0

    Type: Bug
    ID: 657695
    Opened: 4/6/2011 12:10:52 PM
    Access Restriction: Public

    0 Workaround(s)
    5 User(s) can reproduce this bug


    Update:

    Posted by Microsoft on 6/14/2011 at 3:20 PM
    Thank you for your feedback.

    We were able to reproduce the issue and are investigating it.

    Best regards,

    The Internet Explorer Team


    HTML page that reproduces bug:

    <!DOCTYPE html>
    <HTML>
    <HEAD>
    <TITLE>IE9 Ordered List Zero Bug</TITLE>
    <SCRIPT type="text/javascript">
        setTimeout(function ()
            {
                document.getElementById("dv1").innerHTML = "<ol><li>XXX</li><li>YYY</li></ol>";
                var container = document.createElement('span');
                container.style.cssText = "display:none";
                document.getElementById("dv2").appendChild(container);
            }, 1000);
    </SCRIPT>
    </HEAD>
    <BODY>
    
    <DIV id="dv1">
        <OL>
        <LI>AAA</LI>
        <LI>BBB</LI>
        </OL>
    </DIV>
    
    <DIV id="dv2"></DIV>
    
    </BODY>
    </HTML>
    

    A workaround is to place an empty element after your DIV:

    <div id="one">
       <ol>
          <li>one</li>
          <li>two</li>
       </ol>
    </div>
    <div id="two" style="display:none">
       <ol>
          <li>three</li>
          <li>four</li>
       </ol>
    </div>
    <div id="empty"></div>
    

    Browsers that exhibit the bug

    Internet Explorer 9 (9.0.8112.16421)

    • Document Mode Quirks: Works
    • Document Mode IE7 standards: Works
    • Document Mode IE8 standards: Fails
    • Document Mode IE9 standards: Fails

    Internet Explorer 8 (8.0.6001.19048)

    • Document Mode Quirks: Works
    • Document Mode IE7 standards: Works
    • Document Mode IE8 standards: Works

    Internet Explorer 7 (7.0.6000.16982): Works

    Google Chrome 10 (10.0.648.134): Works