css counter not working in internet explorer for hidden content - how to fix?

Question

We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:

ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
    content:counter(instructions-section); 
    counter-increment:instructions-section;
}

The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others.

It worked like a treat and we were sitting there with smiling faces until someone thought of testing it in Internet Explorer 8, where we ran into some epic Microsoft-style weirdness. When a set was brought up by clicking, all the numbers were zero (0).

I googled around and found this page - it describes the problem fairly well (it's a combination of using :hover and css counter logic used in hidden content), but gives a solution that is less than satisfactory - I would love to be able to keep using the css counters and just implement some ie8-specific hack that somehow makes the page update the numbers. I'm having a hard time finding other stuff on the internet about this problem.

My particular page will describe zeroes until I move the mouse pointer into the div that contains the numbered list, at which point the numbers will magically fix themselves. Is there something I could to "nudge" the page into believing that a mouse is hovering over the element? Or is there a more proper solution?

Romaine

unless I'm missing something, couldn't you just use a normal HTML numbered list? CSS counters are indeed very clever things, but I'm not seeing anything in the question that actually needs them. – Bayle

If you're trying to do something fancy with the styling of the numbers, then this becomes (as I've just discovered) a problem. – Pentangular

Answer 1

Ive had the same issue. I was able to fix it by using JavaScript to apply inline CSS of padding-left 0 (there was already no left padding) once the element was visible. This seems to make IE 'redraw' the element.

Rind

Answer 2

If, as is suggested, the "hidden" is causing a problem then you could try "hiding" the content by instead moving it off screen with this piece of CSS:

.hide {
  position:absolute;
  left: -1000px;
}

I've used the code example from the linked to document to show a possible solution here: http://codepen.io/akademy/pen/LDhGl

Viceroy