CSS li spacing

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a problem with my CSS code displaying list bullet points between IE7
and FF2.

I want to achieve this:

Text Text Text
 - Item 1
 - Item 2
Text Text Text

which comes out fine in IE7, but in FF2 it comes out as:

   Text Text Text
- Item 1
- Item 2
   Text Text Text

ie, the bullet points start outside of the text above and below.

Here is my sole code for the li:

li.square {
    vertical-align: bottom;
    padding-top: 6px;
    list-style-image: url(/images/square_bullet.gif);
    color: #AB3059;

and implemented thus:

<li class="square"><span>Item 1
<li class="square"><span>Item 2

What can I add or chage to make sure the bullets (ie the space before the
bullet) is the same in FF and IE7?

Many thanks

Re: CSS li spacing

nospam@nospam.spam wrote:

Quoted text here. Click to load it


Quoted text here. Click to load it

Have you tried setting all margins and paddings on ul and li to 0
first? Each browser has their own default margins and paddings on

Then, it's impossible to position the bullets exactly in the same
place cross-browser. Either accept that, or replace the bullets by
background images to fake bullets.

Els                     http://locusmeus.com /

Re: CSS li spacing

Quoted text here. Click to load it

Please give the *entire* HTML example and/or link to a demo page.  It's
impossible to say what's happening when you only show some isolated,
open elements.  My guess is that the list lies outside the block
element(s) that contain the text.

My personal UDP list:, 4ax.com, buzzardnews.com, googlegroups.com,
    heapnode.com, localhost, ntli.net, teranews.com, vif.com, x-privat.org

Site Timeline