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.
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.
/* no author styles defined except for background-color */
[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;}
ul {margin-left: 0; padding-left: 40px;}
ul {margin-left: 2.50em; padding-left: 0;}
ul {margin-left: 0; padding-left: 0;}
{/* properties for 'li' not altered
*/}
{margin-left: 0; padding-left: 40px;}
{margin-left: 40px; padding-left: 0;}
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.
/* no author styles defined except for background-color and border */
[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;}
ul {margin-left: 0; padding-left: 40px;}
ul {margin-left: 2.50em; padding-left: 0;}
ul {margin-left: 0; padding-left: 0;}
{/* properties for 'li' not altered
*/}
{margin-left: 0; padding-left: 40px;}
{margin-left: 40px; padding-left: 0;}
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.
ul {margin-left: 40px; padding-left: 0;} li {margin-top: 5px; margin-bottom: 5px;}
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:
ul {margin-left: 40px; padding-left: 0;} li {margin-top: 5px; margin-bottom: 5px;}
ul {margin-left: 0; padding-left: 40px;} li {margin-top: 0; margin-bottom:0}
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