decrease distance between li bullet and text?

[heisters]

subject says it all, I haven't been able to find anything on google about this, and playing with padding and margins hasn't yielded useful results.

TIA.

[Setek]

AFAIK, there's a minimum amount of space that has to be there, and you can't go any smaller than that, but you can increase the width to a greater distance apart.

Now, if you want a solution that doesn't use the default list-styles, you can:

1. set your ul's list-style: none;

2. set your ul li's background to have an image of a bullet

3. set your ul li's padding-left to however much space you want between the text, and the image

Hope that solves your problem :)

[iamlost]

You can in FF and Opera. IE apparently not. Not tested in other browsers.

Look at this in the three browsers to see what I mean:

<ul>
<li><span style="margin-left: 0;">A</span></li>
<li><span style="margin-left: -1em;">B</span></li>
<li><span style="margin-left: -2em;">C</span></li>
</ul>

Note: You can replace the <span> with <a>, etc. and it still works as expected.

As IE ignores the style you can offer the look you want in most/all compliant browsers and leave IE to be itself.

[Setek]

Considering IE has what, 93% of market share of browsers currently used? It would be a bit silly to let IE be...

IMHO anyway :)

[iamlost]

It would be a bit silly to let IE be...

As few looks are pixel perfect cross-browser and this instance is between a normal default look and a 'custom' appearance for those who support it...why not?

[SilverLining]

I usually set

ul {margin:0;}

and then

ul li {margin:0;}

to get it nice and flush, then you can increase your magin-left on the li if necessary.

[SuzyUK]

don't know if this will help, but in this thread Crossbrowser distance between custom <li> bullet and text [webmasterworld.com] waldemar sums it up nicely[/url] methinks

Thanks everybody for participating in my conclusion: forget the list-image, use background-images...

Suzy

[heisters]

Oops. I started this thread and forgot about it, because I worked out the background image hack on my own. The thread SuzyUK posted above summarizes better than I would, so look there if you're also looking for a solution to this.

[Rhys]

I use this construct, with, or without &nbsp;'s to achieve Look-alikes to <li>

&#149;No Space between Bullet and Text<br>
&#149;&nbsp;&nbsp;Two Spaces between Bullet and Text<br>

My method allows me to simply regulate the space between the bullet and the text, and seems to be cross-browser proof.

[SuzyUK]

Ahh but Rhys, while that works ~ it is adding presentational elements to the HTML (which is almost like swearing around here sometimes ;)) - You should learn to use lists, embrace them they are sooo flexible and this problem is easily worked around..

and besides your way would not enable the replacement of the standard bullet with an image bullet instead without even more HTML, which is usually where this "problem" becomes an issue.

[Robin_reala]

For what it's work, CSS3 will probably introduce the pseudoelement ::marker which will let you style your bullets whatever way you want. For example, if you only want your list marker to be 3 pixels away from your text you could write:

li::marker { padding-right: 3px; }

Or at least that's how I believe it works :)