Some things are so obvious and well known to the seasoned developer that they never think twice about them. On the other hand web-dev neophytes struggle with the basic *how to*, leaving little or no time for the *why*. This is a shame. Deep understanding can only come with knowing the *why*. Why is what makes us wise.

We know that browsers handle lists differently and certainly [Eric Meyer's reset](http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/), [Tripoli](http://devkick.com/lab/tripoli/tripoli.base.css) or the [universal selector reset](http://reference.sitepoint.com/css/universalselector) will make short work of that. However, therein lies a problem.

## So why must we reset `ol` and `ul` list elements?

Because browsers handle the indentation differently. Most browsers use left padding, however Internet Explorer 6 and 7 use left margin (IE8 uses padding).

* Firefox, Chrome, Opera and IE8 - left padding
* IE6, IE7 - left margin

The universal selector reset will correct this. The problem here is that CSS newbie's may not understand what is actually happening. Sure, its taking out margins and padding, but specifically which margins and padding and how is this actually resetting each browser?

A better approach is to specifically reset the list elements. This clearly shows we're resetting list elements.

Or we can set a default, wiping out any padding and overriding IE6 and 7 margin left. If we just leave them as "0" bullets will be out-dented.

Whatever method we choose we must reset list elements for cross browser compatibility. For my open source projects I've started thinking much more deeply about how to give an immediate and accurate picture of what is going on; that perhaps the newbie might learn something from it, as well as doing its job.