Recipe 5.2. Writing Cross-Browser Indentation in Lists

Problem

Different browsers use different methods to indent lists. You want to specify left margins for your list that will render on all browsers.

Solution

Set the margin-left and padding-left properties for the ul element:

ul {  margin-left: 40px;  padding-left: 0px; }

Discussion

Different browsers use different methods to pad or indent a list. Mozilla and Netscape 6+ browsers indent a list on the padding, while Internet Explorer and Opera pad a list through the margin of a list.

To gain cross-browser effectiveness, you need to set the values for both the left margins and the padding for the list. Keep the amount of the indentation in one of the properties. Splitting the amount into two different properties results in inconsistent presentation across the browsers.

If you set the margin and padding to zero while the list is contained by only the body element, the browser renders the markers outside the viewport, making them invisible to the user. To make sure the markers are visible, set the left margin or left padding of the ul to at least 1em.

See Also

Recipe 5.9 on creating hanging indents; CSS 2.1 specification for padding at http://www.w3.org/TR/CSS21/box.html#propdef-padding; CSS 2.1 specification for margin at http://www.w3.org/TR/CSS21/box.html#propdef-margin.