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!

[akapsycho]

Do you need a bullet? You can have a bullet-less unordered list if that fixes your problem.

[drhowarddrfine]

There are three things going on here.
We need the .gif for the button to see what's happening.

Browsers tend to have different default margins and padding for some elements which could be affecting this. It is common to set all margins/padding to zero and then set them to what you want in order to get consistency.

Are you using a proper doctype? Without one IE screws everything up.

[knkk]

Thanks, akapsycho and drhowarddrfine. The gif is merely a smaller bullet (•) than HTML produces for LI. Yes, I do need the bullets. Here is the code, if it will help:

HTML:

<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="v10b">
<TR>
<TD>
<UL STYLE="padding: 0; margin: 2 0 0 0">
<!--setting paddings and margins to zero above-->
<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.

The problem is not in IE - it is 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 for your time.