IE 9 Bug with Ordered Lists and Tabs/Hidden Divs


There are times when I envy web app developers who don't have to deal with much on the UI end because they have other people in their departments/organizations that deal with it. Alas, in our small shop, we code the apps and we have to do all the UI stuff, with most of the CSS/layout stuff falling on me because of the two of us, I hate it less so I'm overall stronger in it. But days like today make me want to scream!

Getting close to launching a new app, so doing some internal testing and checking pages, especially the public facing sites, in Firefox, IE, and Chrome. After about an hour or so, all I'd found so far as a little border issue that showed in incorrectly displayed in Chrome that was easily fixed. And then I got to the very last page I had to test for the public site (seriously) and discovered a joyful little bug in IE that has had me googling, unsuccessfully, for a solution for the last two hours. Plenty of hits, but no fixes.

See, IE 8 and 9 have a bug that causes them to change all of the items in an ordered list to “0” if the list is within a DIV that is hidden then “displayed”, as happens when using jQuery UI tabs.


How the list should (and does) look – in everything but IE


How the list actually looks in IE 9

If you take the list out of the tab, it works perfectly:

This is a known bug in these two versions of IE, that is supposedly fixed in IE 10, but by our standards we must also code to support 8 and 9. My googling found lots of bemoaning about the issue, but thus far, no actual solutions. The “empty div” after the list trick didn't work, nor did the “counter-reset” trick or the CSS trick posted over on jQuery UI's bug reports. I've seen some posts talk about it being an issue with using width or the like in the list's CSS, but we aren't doing that. The list isn't really styled at all. It's just a basic list plopped into a tab. It doesn't help that many of the “problem” forum posts get boiled down to “it's not a bug with our product but IE, so discussion doesn't belong here” or dissolves into code critique that point out other issues but not the ones that are actually giving a work around for the real, known bug.

For ideas I came up with, I tried the well known CSS “fix” for tabs to push them off screen instead of using the usual method of hiding (oft employed when you have dynamic stuff in tabs that borks), but IE was not fooled. I also tried adding an extra item to the list and removing it when the FAQ tab was activated, hoping it would trigger IE to “recount” the list, but nope, it did not work.

So far, the only “solution” I've found that works, besides just not using IE, is to just not use an ordered list and to manually put the numbers in, but of course it looks off as the text doesn't nicely align to the left, instead the text items wrap under the numbers if they are long enough to wrap (which several will be). The alternative is, of course, to just not use an ordered list at all, which may end up being the solution we go with, pending client approval, of course.