[thelist] css: formatting list item spacing

Dulcie Meatheringham dulcie at heritagecommunityfdn.org
Tue Dec 11 13:35:07 CST 2001


 Chris Blessing wrote:

> In reply to:
> > I'm trying to adjust the horizontal (for lack of a better term) padding
> > between list bullets and the text of each list item.
> >
> > List items by default place a 12-px-or-so horizontal gap between the
> > bullet and the text. I'd like to decrease that gap for visual reasons,
> > which is not really essential, I suppose, but would be very sleek. I've
> > read through the entire CSS1 spec (again), played with margins, padding,
> > and borders on the <ul> and <li> elements . . . no cigar. There must be
> > some aspect of the <li> element that I'm not paying attention to.
>
> IIRC there isn't, so searching any further will only give you an ulcer (or
> at least some bad heartburn).  I usually end up using a table (messy, yes,
> but it does the job well) with two cells: left side for an arrow/bullet
> image, right side for the text.  Keeps things lookin good.

I think you can adjust the line-height for lists, ie.

li{
line-height : 95%;
}

But to adjust the space between the bullet and the text you may have to make
a custom "bullet" image and reference that in your style sheet. The image
you make could be wider than a usual bullet (partially transparent, or the
same colour as the background) to edge it closer.

Clear as mud?

Dulcie.
--
dulcie at heritagecommunityfdn.org
Web Projects Coordinator
www.heritagecommunityfdn.org
Heritage Community Foundation





More information about the thelist mailing list