Indenting Lists Consistently Across Different Browsers
Friday July 3, 2009
Indenting lists is one of those frustrating aspects of the browser wars. Browsers like Opera and IE give the UL or OL element some left margin, while browsers like Firefox and Safari give the UL or OL element some left padding. So, when you're testing your Web pages in one browser or another, it can be very frustrating to change the margins of your UL and have Firefox ignore you. But with CSS you can learn to indent lists and have your changes look the same in most browsers.
Nasty at first, but once you understand it and get used to it, it doesn’t even bother you. (At least that’s how it is with me. ) You would probably just zero-out both of them and set whatever property suits you. It’s the same concept the with headings’ top margins, I believe.
I tend to use a reset style sheet to bring all (most) browsers into line, and then work off a blank slate of default style settings; so all lists are initially set to zero padding and zero margins. From there I set text-indent, paddings, margins, etc.
Some would argue a reset style sheet is a bit overkill, but it does “solve” the problem of browser inconsistencies nicely.