When using lists, it is important to understand that different browsers apply different properties for displaying lists! Most modern browsers apply default padding, while some browsers apply default margins. This leads to variance in how lists will be displayed across browsers.

Here are two examples from the textbook which show how Safari and IE apply different styles to the same list. In the images below, the red border indicates the content box of the UL element, and the green border is applied to each LI element. As you can see, Safari, shown on top, uses padding while IE uses margins to indent the list items. The two lists have different widths inside the DIV when displayed. This difference can cause issues when we are ready to use lists to create menus. We need a way to ensure that our lists will be rendered predictably and consistently across all browsers.

Safari versus IE

The Solution

In order to level the playing field and force all browsers to display lists similarly, simply set the padding and margins for a list and the LI elements to 0 with:

div#sideBar ul { margin: 0; padding: 0; } div#sideBar ul li { margin: 0; padding: 0; }

This overrides the browser's default styling for lists, and forces all browsers to render lists the same way. Later you can adjust either the padding or margins to adjust the spacing of the list as you desire. The key is to set both padding and margin if you adjust the indentation of a list. Thus you effectively override defaults for browsers that set a default margin for lists, and for browsers that set a default padding.

example of margins and padding set to 0

In fact, you may be forced to explicitly set the margin and padding because doing the above step may place the bullets outside the DIV element itself. Later, we will be hiding the bullets to create our menu effect.

Summary

Setting both padding and margin for lists explicitly will force all browsers to display lists in the same way, circumventing the variance in browser default styling of lists.

Setting the defaults to 0 for padding and margins allows us to later define padding and margins for our menu items... for a specific DIV, or any other defined area in our layout.

Resources