/    Sign up×
Community /Pin to ProfileBookmark

Styling lists

Copy linkTweet thisAlerts:
Dec 30.2011

How do I decrease the space between the bullet and the list item (i.e. the text itself)?

I’ve been fiddling with this for awhile, but I’ve only been able to increase/decrease the space left of the bullets (by defining margins and padding in the UL), and increase the space between the bullets and list items (by defining margins/padding greater than 0 in the LI).

I’ve noticed that when I define list-style-position:inside in the UL, the space decreases somewhat, but then I have the undesired result of long list items wrapping below the bullet (rather than below the list item content directly).

I have read these articles
– [url]http://www.alistapart.com/articles/taminglists/[/url]
– [url]http://devedge-temp.mozilla.org/viewsource/2002/list-indent/[/url]
but, unless I’m misunderstanding something, they only explain how to increase/decrease the space left of the bullets.

Help?? Thank you!!

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@DeveloperBillDec 30.2011 — I have never been able to do that either, but I think there is some CSS3 code that is supposed to work. Seems like it's always been a shortcoming of lists to me. When I got desperate, I just went with the old way of using a table with the bullet in first column and text in the second.
Copy linkTweet thisAlerts:
@Nicola001authorDec 30.2011 — Yeah, that's what I've done in the past (tables), but urgh! I really don't wanna do that again.

I posted this question elsewhere and someone recommended putting a SPAN inside the LI, which is better than putting the whole thing in a table but it's the same problem: it's just not very tight/clean. Anyway, here's the link to that, in case you're interested: http://www.codingforums.com/showthread.php?p=1175704#post1175704.
Copy linkTweet thisAlerts:
@hamburglarJan 01.2012 — Hey,

I hate this thing as well.

Here is what I have done in the past:

Give the text inside a span and place negative pixel spacing. I don't like this way because of the negative spacing.

The other way is to just get the image of the bullet and set it as the background for list element. This way you can change the text through padding. You can grab list element images just googling them.

Let me know if this helps.
Copy linkTweet thisAlerts:
@scriptsconnectJan 08.2012 — Padding my friend. Padding.

And by the way... a trick a lot of Jr UI Developers do not know about is that you should not use list-styles, or list-style-type. You should instead use background images. One reason is that list-style-types are nearly impossible to get styled the exact same for all browsers. However, if you are trying to style an ordered list, then you do have to use list-style-type.

Instead, use background images.

An example of an unordered list is as follows:

[CODE]ul {
margin: 5px 15px;
padding: 0;
}
ul li {
margin: 0;
padding: 3px 10px 3px 25px;
color: #000;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 14px;
list-style-type: none;
text-align: left;
background: transparent url("bullet.png") 3px 5px no-repeat;
}[/CODE]

[CODE]<ul>
<li>Text</li>
<li>Text</li>
</ul>[/CODE]

I hope that helps
×

Success!

Help @Nicola001 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.19,
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,
)...