homepage Welcome to WebmasterWorld Guest from 50.16.130.188
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
decrease distance between li bullet and text?
heisters




msg:1215691
 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.

TIA.

 

Setek




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

iamlost




msg:1215693
 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:

<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




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

iamlost




msg:1215695
 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?

SilverLining




msg:1215696
 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.
SuzyUK




msg:1215697
 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...

Suzy

heisters




msg:1215698
 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.

Rhys




msg:1215699
 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.

SuzyUK




msg:1215700
 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.

Robin_reala




msg:1215701
 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