Menu
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?
856
By default, browsers number ordered list items with a sequence of Arabic numerals.
Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc. The default numbers for list items. For creating an ordered list with numbers, use the <ol> tag attribute type.
This attribute specifies the starting number of the first item in an ordered list. The default starting number is one.
Ordered HTML List. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
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: Public0 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> Internet Explorer 9 (9.0.8112.16421)
Internet Explorer 8 (8.0.6001.19048)
Internet Explorer 7 (7.0.6000.16982): Works
Google Chrome 10 (10.0.648.134): Works
133
Another solution :)
Show the element:
el.show();
Then:
setTimeout(function(){ $("ol").css("counter-reset", "item") }, 1);
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
