Web design: Default browser list style
Some time ago, I noticed that the horizontal spacing in the TOC was too large in IE7. I didn’t care much about it then, because this was only a minor esthetical issue present only in very old browsers. However, I recently accidently found out the cause of this behaviour. In most modern browsers, the horizontal indentation in a UL (say) is done by the rule padding-left: 40px
, and the left margin is zero. Consequently, to change the horizontal indentation (for instance, to remove it), you have only to change padding-left
. But IE 7 and below creates the horizontal indentation using margin-left: 30pt
instead.
My original CSS was
div#toc ol {
list-style-type: none;
padding-left: 2em;
}
which creates an indent of 2 em in a modern browser, but an indent of 30 pt + 2 em in IE7 and below. When I realised this, I changed the CSS to
div#toc ol {
list-style-type: none;
padding-left: 2em;
margin-left: 0em; /* Old IE */
}
In fact, I do not know of any specification saying that the left margin must be implemented using padding, so it was a bit thoughtless of me not to consider the margin in the first place.
In the same article, I also noticed that the TOC spacing problem worsened in IE6. The reason is that the + selector doesn’t work in IE6, so the following style is ignored:
div#toc>ol {
padding: 0;
margin: 0;
}
See the change in IE7 on Windows Vista: Before and after.
Update (2014-11-21): Well, the HTML5 specification suggests that padding-left: 40px
be used for lists (OL, UL
).