Ordered lists in Internet Explorer

While working on some lowly HTML the other day, I found myself with a frustrating problem. Ordered lists were rendering properly in Firefox but not IE. These particular lists were nested, and the first level items were always rendering with a bullet, rather than "lower-alpha" as I had defined the style.

My styles were defined as follows:

OL {
list-style-position: outside;
list-style-type: lower-alpha
}

OL OL {
list-style-type: decimal
}

OL OL OL {
list-style-type: lower-roman
}

Seems simple enough... yet IE simply refused to draw anything other than a bullet for the first level. If I changed list-style-position to "inside", it would render the list item properly, but I didn't want the "inside" layout. I tried experimenting outside the construct of my web site, and it worked fine. So what was going one?

The answer lay elsewhere in my style sheet. I had the following entry at the top:

* {margin: 0px; padding: 0px }

The purpose of this is to try to equalize default padding/margin settings for all tags, since IE and Firefox have very different opinions on this matter. This statement makes it much easier to design styles that work the same between these two browsers (although doesn't entirely solve the problem, but that's another story). However, it has the insidious consequence of confusing IE regarding ordered lists. When I removed the global margin setting, OL worked again.

The solution is very simple: add "margin-left: 10px" (or thereabouts) to the OL tag style. I am guessing that because the list marker is "outside" the CSS box in the list definition, if the margin is set to zero, IE thinks it doesn't have space to render a letter or number. Of course it still renders a bullet in the same space, so it really makes no sense, but it's the only explanation I can think of.