Space between bullet and text in li tag (unordered list)

[knkk]

Hi,

I need to be able to reduce the default space between a bullet and the text that follows it. After searching all and sundry, I came up with the following CSS, that unfortunately does not work in FireFox:

My UL tag looks like this:

<UL STYLE=\"padding: 0; margin: 2 0 0 0\">

My CSS looks like this:

ul li {
list-style-type: none;
padding: 2 0 0 0;
_padding: 2 0 0 10;
#padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;
}

(All those paddings were to get additional left margins in IE because I was able to get the bullets there, and so the text needs to move right. Only IE reads those rogue characters - _ for IE 6 and # for IE 7.)

Does anyone know how to get this to work in FireFox? Or any alternate solution? Thank you very much for your time!

[stespeakdesigns]

Try editing the list style type or position to inside on your css.
If it's set to Inside I think you can alter the margin / padding and it will work in firefox.

[knkk]

Thank you for the reply, Stephen. I however want the bullet outside. Is there any way of doing that?

[ray326]

I believe you'll need to make the bullet a background image of the li in order to get precise control over its placement.

[stespeakdesigns]

Ah I see

Often when I work on CSS layouts in work, I find that bullets don't really like margins or paddings.

But when I use the inside, I have the ability to move the position of both the bullet and text.

Maybe mix the position inside with minus margin / padding on the UL tag?

It's hard to say without actually looking at your problem / code.

[knkk]

Thanks, Stephen. Here is the code:

HTML:


<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="v10b">
<TR>
<TD>
<UL STYLE="padding: 0; margin: 2 0 0 0">
<LI><B>Events</B><a href="/profile/events/3541"> Tenth Summer Camp For Children By YWCA</A></LI>
<LI><B>Events</B><a href="/profile/events/3525"> Vasanthotsavam Celebrations At Shilparamam</A></LI><LI><B>Events</B><a href="/profile/events/3624"> Summer Collection</A></LI>
<LI><B>Events</B><a href="/profile/events/3525"> Celebrations At Shilparamam</A></LI>
<LI><B>Events</B><a href="/profile/events/3623"> Orion - Live Rock Show</A></LI>
<LI><B>Events</B><a href="/profile/events/3556"> 40-Day Summer Camp</A></LI>
<LI><B>Events</B><a href="/profile/events/3483"> Painting Exhibition By Pushpa Bagrodia</A></LI>
</UL>
</TD>
</TR>
</TABLE>


CSS:


ul li {
list-style-type: none;
padding: 2 0 0 0;
_padding: 2 0 0 10;
#padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;
}


v10b is merely Verdana font-size 10.

Ray326, as you will see, I was indeed using your approach. The problem is, it does not work in FF...

[knkk]

Well, I fixed the problem, and it works in both IE and FF. Turns out that the mistake was in the two extra zeros at the end that I put in my background (image) definition. This is my current stype definition:


ul li {
list-style-type: none;
padding: 2 0 0 10;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px; /*originally this was 0 7px 0 0, which was the mistake*/
}

Thanks, everyone!

[Centauri]

You need to specify units with css dimensions ul li {
list-style-type: none;
padding: 2px 0 0 10px;
background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px;
}

When the bullets are outside, margin moves everything including the bullet, and padding moves the text without moving the bullet.

[WebJoel]

Just curious:

<UL STYLE=\"padding: 0; margin: 2 0 0 0\">

What are/were the backwards slashes for?

[knkk]

Webjoel, the backslashes came by mistake - I had copied the HTMl from a php echo statement. Centauri, I added the "px" - thanks for that!