/    Sign up×
Community /Pin to ProfileBookmark

Can you change the space between a <li> bullet and the text?

I know text-indent should work, but it seems to do different things in IE and FF. In IE it moves the bullet and in FF it just moves the text. Are there any tricks to fix this?

thanks!

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@foxbeeflyJul 30.2007 — Welome to the wonderful world of CSS where Microsoft shows its true colors!

What exactly are you trying to achieve?
Copy linkTweet thisAlerts:
@jtownauthorJul 30.2007 — I want the little <li> bullet to be closer to the text for the <li>.
Copy linkTweet thisAlerts:
@foxbeeflyJul 30.2007 — As far as I can tell, there is a minimum default distance. You can only increase this distance.

You could create a rule that hides the bullet:

ul

{

list-style-type: none;

}

and then set a background image on you <li> element....

Once again: depends what you are trying to achieve and where!
Copy linkTweet thisAlerts:
@jtownauthorJul 30.2007 — Ah I see. I'm trying to reduce the distance, but your idea with the image might work.
Copy linkTweet thisAlerts:
@ray326Jul 30.2007 — If you search the forums you'll find a discussion on that from a couple of years back. You can get very fine control of the "bullet" if you do it with a background image.
Copy linkTweet thisAlerts:
@jtownauthorJul 30.2007 — If you search the forums you'll find a discussion on that from a couple of years back. You can get very fine control of the "bullet" if you do it with a background image.[/QUOTE]
Ok thanks! I did search, but there were a ton of pages. I even read through quite a few threads. But thanks! That's all I really needed to know. I'll go the img route.
Copy linkTweet thisAlerts:
@ray326Jul 31.2007 — DaveSW and I had the conversation and I put a demo page up but it's probably not there any more.
Copy linkTweet thisAlerts:
@Major_PayneJul 31.2007 — Image as markers if you didn't quite get there yet:

[CODE]ul li {list-style-image: url(image.gif);}[/CODE]

Just size image properly and it will work like a charm.

Might want to include a fall-back marker just in case:

[CODE]ul li {list-style-image: url(image.gif); list-style-type: square;}[/CODE]

If you have nested lists (list-style-image is inherited), use:

[CODE]ul li {list-style-image: url(image.gif); list-style-type: square;}
ul ul {list-style-image: none;}[/CODE]


Could shorten some of this:

[CODE]li {list-style: url(image.gif) square inside;}[/CODE]

How well this works will depend on browser used. CSS2.1 will allow you to place marker inside or ouside the content of the list item if you want to play with this.



Ron
×

Success!

Help @jtown spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...