A list falls apart :-)

Common user agents use different default values for margin and padding of lists; trouble is ahead if you manipulate a single property. A quick and dirty explanation.

Consider a simple unordered list:

<h1>A List</h1>
<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ul>

To understand what’s going on, let there be colors:

ul
  {
  color: #000;
  background: #abc;
  }
li
  {
  color: #000;
  background: #ffc;
  }

Now let there be screencaps (all browsers running on windows 98se):

Mozilla 0.9.7

Mozilla displays list markers in the padding area of the list

Opera 6

Opera displays list markers in the margin area of the list

Internet Explorer 6

Internet Explorer displays list markers in the margin area of the list

What can a girl do?

Make declarations for all margins and paddings of the list to accomplish a consistent appearance in different UAs; usually the idea is to get rid of the left indentation of a list, like in the following example.

ul
  {
  margin-left: 0;
  padding-left: 1em;
  }
li
  {
  margin: 0;
  padding: 0;
  }

ul
  {
  margin-left: 1em;
  padding-left: 0;
  }
li
  {
  margin: 0;
  padding: 0;
  }

This is described in more detail by Michael Nahrath and Eric A. Meyer.

info@tagsoup.com 2008 Tagsoup