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

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\">

Code (markup):

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;
}

Code (markup):

(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!

 

That's for image replacement purposes, he's not trying to do that is he?

Anyway, that is one ugly ass rule. Don't use hacks like the underscore or the hash mark. You also should use the unit unless it's a zero, 11px, 2px, 3px, because theoretically a browser can just take a guess and maybe think your "2" is a em, pixel, point, mm, inch, you get the point. Always be accurate and specific.

I think the problem lies with your background property value, you can't set values 4 times... it can only be 2 times and that should be how much spacing you want from the LEFT and from the TOP.

ul#nav li {
background:url(images/bullet.gif) no-repeat left center;
}

This says to put the background image on the left side, vertically centered. You should also kill the margins on ul/li ( universal reset or explicit reset) and then add padding to your LI equal to the image's width.

ul#nav li {
padding:0 0 0 8px;
}

This is off the top of my head, but I think thats how it should work.. let me know if I missed out on something.

 

I know what text indent does, and you should be using w3 not w3schools for your reference, but it is not necessary for what he is doing. Should be using padding instead.. what if there's more than just text?

 

Thanks, Katy. -ve text-indent works (both with default LI bullet and with an image for the bullet), but only the first line of text moves (i. e. when the text is long and has wrapped into the second line, the second line stays where it is). Do you know any way around that?

soulscratch, you hit the nail on the head! I set the values for background property just twice instead of 4 times, and it works like a charm. My style definition is now this (works in both IE and FF):

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

Code (markup):

Thank you for your time very much indeed. I wasted about 5 hours yesterday because of this stupid mistake.

Incidentally, I have not been using px since both IE and FF seem to assume that by default, and I am saving some bytes .

 

knkk: What about other browsers? ie5/ie6/ie7/opera8/opera9/safari1.x/safari2/safari3/ff/moz 1.7/netscape 8.. have you tested in those? I would still use px.

And did you already get rid of text-indent? The reason why it's better to use padding is because if there's another element inside the LI, you can't shift it using text-indent, and it only gets the first line of text which is why I recommend padding.

 

soulscratch: i am testing only for ie and ff - 98-99% of my users use these. also, i just realized i am coding in quirksmode. i am starting to put px everywhere and code in strict mode.

and i was not using text-indent there, because of the problem i wrote about (basically the same as you mentioned - first line of text). fortunately, just getting rid of those extra zeroes and using padding solves my problem.

thanks again!

 

One of the problems I often encounter with bullets is that no two browsers place them on the page the same way - and the specification is vague enough that they could all be considered correct.

Any time it HAS to be 'pixel perfect' I often say screw it, set the list-style to none, pad the left side of each LI and just set an image as the background.

It's not a perfect solution, but it often beats the crap out of getting different sized bullets in radically different places then having the customer complain about it.

 

Which is what I seem to have done... Well, it seemed like a perfect solution to me, given all the other alternatives I tried .