Damn you, IE, and the ordered list you rode in on!

I just spent HOURS trying to figure out why a page that I was doing wasn’t working in IE. It had an ordered list, and worked just fine in Firefox, but when I looked at it in IE, I found that it left the numbers at the bottom of each item … and the numbers set at one for each item (see example). I tried switching to a numbered ul, tried removing the p tags, called upon the ghosts of XTHML past, asked friends. I finally stumbled upon the answer after lots of googling on Quirksmode.com:

“…if you give width (or height) to the LI, they will all be numbered with 1. “ Quirksmode.com

Lo and behold, that was the answer – IE can’t handle li that have added height or width definitions in the CSS. What the hell is THAT?