Styling list margins ("indentation")

the Issue

Both 'Internet Explorer 5 for Macintosh' and 'Netscape Navigator 6 / Mozilla' are known for their allmost perfect CSS1 implementation. Nevertheless there seems to be a huge difference in the way they deal left-margins in lists.

Thanks to David Baron who helped me with his news-posting (Message-ID: <slrn92ai53.uuf.dbaron@is04.fas.harvard.edu>) in ciwas when I was most puzzled.

Actually both browsers get list margins and padding completely right but they use different default-values (which is perfectly legal according to the CSS-Specs). If you use styles that rely on certain behaviour you should expliciteley state the other values as well.

Tips for using this Page

Opening the page in a second browser window makes comparing the different tests much easier.

Each test list is surrounded by a blue-background 'div'-element to make the boxes visable. 'ul' has a green background and border and for 'li' they are red.

For those who don't have access to a CSS capable browser (NN4 and 'iCab pre 2.5.1' are none!) or like to compare I made a screenshot of the page in MacIE5.

the Tests

This is your browser's default behaviour:
/* no author styles defined except for background-color */
The default values for Mozilla are (you may read it on your own in [Mozilla program-directory]/res/html.css, there is some more stuff for nested lists):
ul {display: block; list-style-type: disc; 
   margin: 1em 0; padding-left: 40px; 
   counter-reset: -html-counter 0;}
Most of these properties are self-evident for other browsers. So this should be enough to mimic Mozilla's default behaviour:
ul {margin-left: 0; padding-left: 40px;}
The default values for Mac-IE5 seem to be (just found out by guessing and testing):
ul {margin-left: 2.50em; padding-left: 0;}
And now some playing around with padding and margins for the 'li'-Element:
ul {margin-left: 0; padding-left: 0;}

the Tests with borders

Following are the same testcases with a 5px border set. This may make some things more obvious, but also changes the rendering, because margins dont merge (the box becomes explicite), when a border is set.

This is your browser's default behaviour:
/* no author styles defined except for 
   background-color and border */
The default values for Mozilla are (you may read it on your own in [Mozilla program-directory]/res/html.css, there is some more stuff for nested lists):
ul {display: block; list-style-type: disc; 
   margin: 1em 0; padding-left: 40px; 
   counter-reset: -html-counter 0;}
Most of these properties are self-evident for other browsers. So this should be enough to mimic Mozilla's default behaviour:
ul {margin-left: 0; padding-left: 40px;}
The default values for Mac-IE5 seem to be (just found out by guessing and testing):
ul {margin-left: 2.50em; padding-left: 0;}
And now some playing around with padding and margins for the 'li'-Element:
ul {margin-left: 0; padding-left: 0;}

Opera

Opera (version 5b1 for MacOS) behaves almost like Mac-IE5 for horicontal spacing (using 40px instead of the more flexible 2.5em). But it adds vertical margins of 5px to all list items.

This seems to be Opera's default style. Using this code makes other browsers behave like Opera does:
ul {margin-left: 40px; padding-left: 0;} 
li {margin-top: 5px; margin-bottom: 5px;}
This makes Opera behave like Mozilla:
ul {margin-left: 0; padding-left: 40px;}
li {margin-top: 0; margin-bottom:0}

Again the last two tests with a 5px border for all elements:

This seems to be Opera's default style. Using this code makes other browsers behave like Opera does:
ul {margin-left: 40px; padding-left: 0;} 
li {margin-top: 5px; margin-bottom: 5px;}
This makes Opera behave like Mozilla:
ul {margin-left: 0; padding-left: 40px;}
li {margin-top: 0; margin-bottom:0}

Links

a list falls apart :-) ... manipulating margins and paddings of lists with CSS

Lists and Indentation - this is the right article if you are looking for a deeper explanation


www.subotnik.net --> style --> list-box-test | private Homepage | e-mail
(This text was originally written in 2001. Last update: 2009-06-16)