Ordered list showing all zeros in IE9

Question

I have an

(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 is

Answer 1

You probably need the following snippet of mark up in your style sheet -

ol {list-style:decimal}

What this does is declare the type of ordered list you would prefer if you haven't yet declared it in your stylesheet.

Answer 2

From your screenshot, it looks like you're using SharePoint. I'm guessing that there is some CSS interference resulting from exisiting CSS settings in SharePoint.

As a test, try declaring your ol style inline and see if it helps.

<ol style="list-style-type:decimal;"> 
    <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>

Answer 3

The empty div workaround did not work for me. Here is some simple jQuery that did the trick.

// Workaround for IE list display bug
$('ol').hide().delay(1).show();

Answer 4

Had a similar problem with Edge on Windows 10. It was showing 0s next to list items within an on a mobile menu that opened using a css transition. Felt like I tried a hundred variants of list-style: none; and list-style-type: none; on the ol, its parents and descendants.

Ended up with this to fix it in Edge / IE but not mess with the styling that worked for every other desktop and mobile browser:

/*
  Hack for Edge browser. Some things never change...
  This is definitely dirty, hacky and overkill.
  Without this, Edge on windows 10 shows a 0. next to every list item in a mobile menu that is animated with a css transition on our site.
  Using technique for targeting Edge from https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css
  Answer by KittMedia: https://stackoverflow.com/a/32202953/
*/
@supports (-ms-ime-align: auto) {
  .element-im-targeting ol,
  .element-im-targeting ol li,
  .element-im-targeting ol * {
    list-style: none;
    list-style-type: none;
  }
}

Answer 5

The numbering issue occurs after revealing a hidden ol element and can be addressed by modifying or adding a class attribute to an element containing the ol element via JavaScript after the ol element has been revealed. The following code does that in a way that doesn't modify existing class attributes in any substantial way, doesn't leave an empty class attribute in the DOM, doesn't require jQuery, and only allows Trident 5.0 browsers (such as IE9) to execute the code:

if (/Trident\/5.0/.test(navigator.userAgent)) { // Windows Internet Explorer 9 Bug Fix
    // Official Bug Report: https://connect.microsoft.com/IE/feedback/details/657695/ordered-list-numbering-changes-from-correct-to-0-0
    // Bug Fix: http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9
    if (listContainerElement.hasAttribute("class")) {
        listContainerElement.setAttribute("class", listContainerElement.getAttribute("class"));
    }
    else {
        listContainerElement.setAttribute("class", "");
        listContainerElement.removeAttribute("class");
    }
}

The issue can also be addressed by setting the display property via JavaScript:

listContainerElement.style.setProperty("display", someDisplayPropertyValue);

In my case, I was showing and hiding the list by removing and adding an HTML5 hidden attribute on an element containing the ol element (with [hidden] { display: none; } for IE9 compatibility) rather than directly manipulating the display property, so I ran into this issue.

Answer 6

Another solution :)

1. Show the element:

        el.show();
   

2. Then:

    setTimeout(function(){
           $("ol").css("counter-reset", "item")
    }, 1);