When you're trying to find consistency between browsers, you need to set both the margin-left and the padding-left values on your list elements (UL and OL). Don't set just one value.
To get the matching lists on this page I wrote this CSS:
ul {
border: 1px dotted purple;
background-color:#ccc;
margin-left:1em;
padding-left:1em;
width: 250px;
}
li {
border: 1px dotted red;
}
Beware of Setting No List Indents
You can set any amount of indenting you want on your lists, but remember that if you set your indents to 0 the marker on the list may not display. It will be pushed off the edge of the browser window, and so not visible.
For Perfectly Symmetrical Lists Change the Markers Too
One thing you might have noticed is that the markers look differently in the two browsers. You can use an image for your marker that looks like the Firefox or Internet Explorer marker - and this will solve the problem. I explain how to do this (and provide the image files) in my article Using CSS to Improve Unordered Lists.
