Different browsers use different methods to indent lists. You want to specify left margins for your list that will render on all browsers.
Set both the margin-left
and
padding-left
properties for the
ul
element:
ul { margin-left: 40px; padding-left: 0px; }
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.
Recipe 4.7 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.
Get CSS Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.