21.12.1 Understanding the problem with HTML lists

You might have already discovered that no matter how you map your numbered lists, they do not render correctly in one browser or another. This problem is the result of a difference in how browsers indent list items. The situation is described in Eric Meyer's CSS book for O'Reilly, 3rd Ed., pp. 377-378. Basically, you can indent with either margin or padding. So Internet Explorer and Opera use this:

ul, ol {margin-left: 40px; }

Firefox and other Gecko browsers use this:

ul, ol {padding-left: 40px; }

Both methods comply with standards, but they create a compatibility issue. The fix is to override one or the other in your own CSS, depending on how you prefer to indent your own list items. If you use padding, add (for example):

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

If you use margins, add:

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

Mif2Go sets both margin and padding:

ul.Bulleted1 {

margin-left: 18pt;

padding-left: 12pt;

list-style: disc;

}

ol.Numbered1 {

margin-left: 18pt;

padding-left: 12pt;

list-style: decimal;

}

Mif2Go uses separate rules for ol and ul because some viewers (notably the JavaHelp viewer) do not follow CSS cascading rules correctly.

---

> 21 Mapping text formats to HTML/XML > 21.12 Converting list formats to HTML > 21.12.1 Understanding the problem with HTML lists