homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

decrease distance between li bullet and text?

 4:31 pm on Jan 31, 2006 (gmt 0)

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.




 3:27 am on Feb 1, 2006 (gmt 0)

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 :)


 5:14 am on Feb 1, 2006 (gmt 0)

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:

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

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.


 5:24 am on Feb 1, 2006 (gmt 0)

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

IMHO anyway :)


 7:40 pm on Feb 1, 2006 (gmt 0)

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?


 7:47 pm on Feb 1, 2006 (gmt 0)

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.

 8:13 pm on Feb 1, 2006 (gmt 0)

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...



 5:01 pm on Feb 23, 2006 (gmt 0)

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.


 8:41 am on Feb 25, 2006 (gmt 0)

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.


 9:00 am on Feb 25, 2006 (gmt 0)

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.


 2:44 pm on Feb 25, 2006 (gmt 0)

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 :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved