Flag of the United Kingdom
Andreas Rejbrands webbplats

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).


Visa alla tidigare notiser.

Visa enbart de senaste notiserna.