CSS Tips & Tricks

The issue: you want to move a list 10px to the right to get more space between the bullets and whatever is on the left. So you create the style rule UL { margin-left 10px; }. But, in IE and Opera, everything moves left 30px NOT right 10px and you're worse off. Surprisingly, Mozilla and friends do what you want!

There are two camps on the default style rules for list indenting: Netscape and Mozilla on one side, and IE and Opera on the other side. When you want custom indenting (or the background of the UL block showing behind the bullets) as state our senario, the different default methods require a more complete approach.

In the above senario the 10px of margin changed the default 40px of left margin used in IE to 10px.. But Mozilla's default left margin is 0 so it gives the desired results. It uses 40px left padding to achieve the default indent.

Fortunately, this issue is easily overcome. In each of the following examples the UL has been given a  red  or a  cyan  background color with a black border. The LI has been given a yellow or a gray background color.

Default Indentations  

The images below show the default indenting of lists. In both images, the bullets are indented approximately 30 pixles, and there is 10px between the bullets and the list item. As a result, the LI elements are indented 40px. In our examples the LI elements have zero padding and margin.

MS IE and Opera indent the list by styling the UL with 40 pixles of left margin and no padding. Consequently, the red background color of the UL element doesn't show.

While Mozilla does the opposite: UL left margin is zero and left padding is 40px. The UL element fills the available width, and the red background is visibile.

Mozilla also has about 10 pixles of top and bottom margin (not clearly shown here), where as, IE uses about 20 pixles top and bottom margin on the UL element.

Cross-Browser Practice for List Indenting  

When not using the default styling (for the list indent) it is necessary to specify both left margin and left padding for the UL element block. You can also specify the top and bottom margins to get more consistent vertical spacing across different browsers; although the difference in vertical spacing is usually not an issue.

If the left margin or left padding is specified for the UL tag, the other must also be specified for browser compatibility.

Compare the following lists to the default for this browser. By specifying both left margin and left padding, you can choose to use the same indentation style across different platforms. The following two lists should match the images above.

Nested Lists  

The same indenting issue goes for nested lists. MS IE and Opera indent the list from the containing list item by specifying a left margin of 40px for the nested UL element and Mozilla specifies a left padding of 40px. However, there is no top or bottom margin for nested lists. Compare the nest two images.

X-Browser Coding  

To get consistent indenting for nested lists across different browsers, follow the same steps. Specify both left margin and left padding for the UL element block. The two lists below should appear the same as the images above. Compare them with the default for this browser shown at the beginning of this page.

In IE 6 there may be a small amount of yellow showing below the inner list. This can be eliminated by given the inner UL a negative 1 pixle of bottom margin.