Welcome to WebmasterWorld Guest from 54.167.216.93

Forum Moderators: not2easy

Message Too Old, No Replies

decrease distance between li bullet and text?

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

5+ Year Member



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.

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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.

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member




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)

5+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

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

5+ Year Member



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)

10+ Year Member



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)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month