|
back to index
This is an illustration taken from the web but it is not a perfect one. The point is that Firefox behaves differently with bullets to IE and the only real way of overcoming these differences is to set the margin and padding to zero for both UL and LI
<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>
- This is entry number 1
- This is entry number 2
- This is entry number 3
- This is entry number 4
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>
- This is entry number 1
- This is entry number 2
- This is entry number 3
- This is entry number 4
|
