Tuesday, December 19, 2006

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.

Why Kitty

Some friends of mine have a cat named Kitty. I asked them, one day, why Kitty? Couldn't they come up with something more creative? Well, he actually does have a real name, but I guess they never really liked it. Anyway, I couldn't think of a name for the blog so Kitty seemed about right. And, in the game of Hearts, the "kitty" is where the leftover cards go if playing with a number of people that doesn't divide evenly into 52. So, it also seems appropriate, because my main purpose for this blog is a place to leave bits of information that I don't really know what else to do with.

We'll see what I actually post here, and maybe it'll get a real name down the road.

I started this blog because I wanted a place, mostly, to remind myself of my own thoughts. I am an IT professional, and I deal with a lot of different problems day to day. Many of them come up again, but often I can't remember exactly how I solved a given problem, even though I remembered dealing with it before.

So call this an extension of my mind, my personal knowledge base. It's really for my own use but I hope that others may benefit from the random bits of information that I will post here. I may also occasionally ponder issues in the world on which I have an opinion... after all, since everyone else on the planet earth seems to do that on a blog, I figured I better get to the party before the blogosphere collapses on it's own weight.