Bug with Broken Ordered list in IE9 June 11, 2011

Recently I’ve been working with ordered lists. And found strange behavior in IE9 when one ordered list is hiding and new one is showing – instead of usual order 1,2,3.. it showed all zeros. And it actually doesn’t matter what list style type you choose – decimal, lower alpha or other.

Let me show you an example in case you do not have the same problem as well on your project:

<html>
<head>
<script type="text/javascript">
window.onload = function() {
        document.getElementById(‘lnk-one’).onclick = function() {
                document.getElementById(‘two’).style.display = ‘none’;
                document.getElementById(‘one’).style.display = ‘block’;
        };
        document.getElementById(‘lnk-two’).onclick = function() {
                document.getElementById(‘one’).style.display = ‘none’;
                document.getElementById(‘two’).style.display = ‘block’;
        };
}
</script>
</head>
<body>
<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>
<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>
</body>
</html>

If you open this HTML in IE9 and then click at first on “Two” link and then “One” you will see the issue:

Looks like order breaks in IE9 when one order is hidding then appears new one and then previous one is showing again. To quickly fix you need to place empty element say <div> in the end of the body and when you show ordered list just assing space to this element inner html. Here you are previous html page fixed:

<html>
<head>
<script type="text/javascript">
window.onload = function() {
        document.getElementById(‘lnk-one’).onclick = function() {
                document.getElementById(‘two’).style.display = ‘none’;
                document.getElementById(‘one’).style.display = ‘block’;
                document.getElementById(‘empty’).innerHTML = ‘ ‘;
        };
        document.getElementById(‘lnk-two’).onclick = function() {
                document.getElementById(‘one’).style.display = ‘none’;
                document.getElementById(‘two’).style.display = ‘block’;
                document.getElementById(‘empty’).innerHTML = ‘ ‘;
        };
}
</script>
</head>
<body>
<a href="#" id="lnk-one">One</a> <a href="#" id="lnk-two">Two</a>
<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>
</body>
</html>

It’s important to place empty <div> after ordered lists. If you place it before – it won’t work.

Author: klalex
Filed Under Category: HTML, IE9, Javascript, jQuery
Article Tags: , , , , , , , ,
Comments: 5 Comments
«
5 Comments
Victoria July 8th, 2011

Seriously, you deserve a monument for this. I have just ran into this bug full stop, and I needed a quick fix. This is just WOW.

Loren Helgeson August 24th, 2011

Seriously? I can’t wait for the day when enough people come around to realizing Internet Explorer is no longer worth the effort.

Kudos on your discovery. This was driving me nuts.

web_dev89 November 24th, 2011

Wow! This works. amazing!

I was stuck with IE9 numbering list and wasted my time in trying so many ways to fix and by chance I came across this blog.
Gave a try and it really worked. I was surprised!
You deserve a lot.

Thank you so much. :)

Vishal shetty February 2nd, 2012

great hack man…..ie sucks and you rock! thanks it helped me too…

Sergey February 13th, 2012

WOW! You saved a lot of my time! Thanks!

Leave a Reply