[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