I discovered something when looking at my web site in Firefox the other day. The lists for items like recent tips were indented a lot more than I wanted. It didn't look terrible, but it also didn't look the way I wanted it (the way it looks in IE). Here's a sample of the problem of how it looked in Firefox compared with Internet Explorer. The examples show things a little more drastic than the problem actually was. But it was still something I wanted to fix (and have fixed; if you're using Firefox you'll no longer see the indented bullets). What was going on?

Well, it comes down to how browsers implement margins on <UL> and <LI> HTML elements. So, to recreate this situation, you'll first want to make sure you have both IE and Firefox installed on your machine (or installed on 2 machines that you have access to). Next, create an HTML page (either a page design element with pass through HTML or a regular HTML page) and put in this HTML into the body:

<div style="border:1px solid black; margin:0 0 0 0;">
<ul style="margin:0 0 0 20; list-style-type:disc; list-style-position:outside;">
<li>This is entry number 1</li>
<li>This is entry number 2</li>
<li>This is entry number 3</li>
<li>This is entry number 4</li>
</ul>
</div>

View that HTML in both IE and Firefox. You won't get the exact same look as the example pictures because I used an outer div with a margin of 120px to narrow the width a little bit for the picture. But you get the idea. In IE, the bullets for the list entries are right up next to the left box border, but in Firefox they are indented. It doesn't look bad, but it doesn't look the way you want it.

The first thing you need to change to get it working in both browsers is you don't want to specify the left margin on the <UL> tag. But you do want to specify the top and bottom borders otherwise there will be a gap. So change <UL> line to:

<ul style="margin-top:0; margin-bottom:0; list-style-type:disc; list-style-position:outside;">

That change means the bullets will now indent in both IE and Firefox. So you add a style to each <LI> element to remove the indent:

<li style="margin:0 0 0 -20;">This is entry number 1</li>
<li style="margin:0 0 0 -20;">This is entry number 2</li>
<li style="margin:0 0 0 -20;">This is entry number 3</li>
<li style="margin:0 0 0 -20;">This is entry number 4</li>

That will pull the left margin over 20 pixels, which should be sufficient. Preview this in both IE and Firefox and it should look the way you want in both browser.

Obviously, adding the style to each element is really inefficient and it should have been added to your external style sheet file or inside <STYLE> tags in the HTML Head section. But this was an easier way to demonstrate the problem and solution.