li's become '0.' in IE when containing div is hidden and redisplayed using jQuery

Question

Weird issue where li's become '0.' in IE:

Please view the following jsfiddle in browser of your choice (excluding IE), and then view it in IE.

Steps to replicate:
1. click hide.
2. Click show.

Result: The list items become:

0.Test 1   
0.Test 2   
0.Test 3   
0.Test 4

So there are 2 div's in play here. One is hidden on load. When the "hide" link is clicked, it hides the div containing the list, and displays the div containing "RAH RAH". And when the "show" link is clicked, the opposite happens, the orginal div is redisplayed containing 0.'s, and the "RAH RAH" div is hidden.

Note: This only happens when there are 2 divs in play, one hidden and the other displayed. If i remove the second div, i can hide and show all day long and the list items will not appear with 0.'s.

What is the work around to this?

The easiest workaround is to force your friends and clients to stop using IE. — JakeParis, May 08 '12 at 02:53
Interesting - this behavior doesn't happen in IE 7 (using the developer tools to switch to IE 7 standards). It does happen with IE 8 and IE 9. — Anna Brenden, May 08 '12 at 02:55
How can you even *use* jsFiddle in IE? Things jump around like mad! — JakeParis, May 08 '12 at 02:57
This question is actually a duplicate of [Ordered list showing all zeros in IE9](http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9). — Anna Brenden, May 08 '12 at 03:04
@EricBrenden looks promising, i'll try to implement it into my jsfiddle. thanks for that. — Mike Mike, May 08 '12 at 03:07

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

For me the solution came from: Ordered list showing all zeros in IE9

This one worked for me:

Show the element:
```
 el.show();
```

Then:

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

edited May 23 '17 at 12:04

Community

1
1

answered May 08 '12 at 12:05

Mike Mike

1,125
3
13
19

Trivia: `setTimeout` has a minimum time out of 4ms. Not that it would break, but the js engine will implicitly set it to 4 if it's less than 4. – Xavier Ho May 08 '12 at 22:43

score 0 · Answer 2 · answered May 08 '12 at 02:58

0

Does this work?

 $('#show').click( function() {
    $('#hide-div').css('list-style-type','lower-roman');
    $('#hide-div').show();
    $('#show-another-div-on-top').hide();

});

Sorry, I can't test it for you...

answered May 08 '12 at 02:58

JakeParis

11,056
3
42
65

li's become '0.' in IE when containing div is hidden and redisplayed using jQuery

2 Answers2