topleft
topright
Members area PDF Print E-mail

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

 
London website design | My Ariadne Designs | Downloads | Terms and conditions | Links | Site map Telephone 0207 928 9940
Ariadne Designs Ltd ©2011