Learning to Control Bulleted (Unordered) Lists

Careful of Browser Defaults: the standards leave it up to the user agent to decide how to display unordered lists. So predictably there is variation about how they do it. The biggest tripping point is that Firefox uses padding-left, while IE uses margin-left to define the default indent of a <ul> element. The CSS on this page zeroes out both of those at the start, and then sets user padding and margin on the <li> element.
```
ul {margin-left:0;  /* required for IE */
padding-left:0; }  /* need this to override FF standard 40px left padding */
li {padding:0;	margin: 0 0 1em 1em;}  /* user defined settings for this page
```
Bullet Style & Position: can be controlled with the list-style-type and list-style-position statements.
Bullet Images: for maximum control of bullet appearance and position, try using background images.

Remember that many menus are created with unordered lists, and the default padding/margin of the <ul> element can easily create problems if not zeroed out.

Return to tightCSS Home Page