Stylesheets - Indention in UL, OL elements

Author

Indention in UL, OL elements

Chris Kinata

2005-10-08, 3:18 am

Hi all,

Having a momentary lapse, hopefully. How does one
set the amount of indention between a bullet and the
body of the text in an <li> element?

What I'd like is a style attribute like

list-style-position: outside;

but be able to specify how much outside. It's
possible to use negative margin-left distances, as in

margin-left: -1pc;

but this causes validation problems.

Regards,
Chris

Chris Kinata

2005-10-08, 3:19 am

Hey, I get to respond to myself!

The best I've come up with is to set

text-indent: -1pc;

or whatever, allowing for the size of the bullet
graphic, and then adding clear space in the graphic
to separate it from the beginning of the first line
of text. But this seems like a workaround.

--Chris

"Chris Kinata" <chris@kinata.com> wrote in message
news:tsidnZOe6eodeNveRVn-qA@whidbeytel.com...
> Hi all,
>
> Having a momentary lapse, hopefully. How does one
> set the amount of indention between a bullet and the
> body of the text in an <li> element?
>
> What I'd like is a style attribute like
>
> list-style-position: outside;
>
> but be able to specify how much outside. It's
> possible to use negative margin-left distances, as in
>
> margin-left: -1pc;
>
> but this causes validation problems.
>
> Regards,
> Chris
>
>
>

Gérard Talbot

2005-10-08, 3:19 am

Chris Kinata a écrit :
> Hi all,
>
> Having a momentary lapse, hopefully. How does one
> set the amount of indention between a bullet and the
> body of the text in an <li> element?
>
> What I'd like is a style attribute like
>
> list-style-position: outside;
>
> but be able to specify how much outside. It's
> possible to use negative margin-left distances, as in
>
> margin-left: -1pc;
>
> but this causes validation problems.
>
> Regards,
> Chris

Consistent List Indentation
http://developer.mozilla.org/en/doc...ist_Indentation

Gérard
--
remove blah to email me

Chris Kinata

2005-10-12, 6:28 pm

Hi all,

Interesting article, very informative. However, I couldn't find
a solution for my central problem: how to specify the distance
between the <li> marker and the text beside it.

Found a thread at

http://www.webmasterworld.com/forum83/7601.htm

at the end of which it seems the conclusion is that there is
no good solution involving list-image. Instead, use a background
image with no-repeat, as in:

ul.lnormal {
font-size: 10pt;
margin-left: 1.5pc;
margin-right: 1pc;
margin-top: 0pt;
margin-bottom: 12pt;
padding: 0px;
padding-left: 1.5pc;
/*
border-width: 1px;
border-style: solid;
border-color: #f00;
*/
}
li.lnormal {
font-size: 9pt;
margin-left: 0pc;
margin-right: 1pc;
margin-top: 2pt;
margin-bottom: 4pt;
text-indent: 0pc;
line-height: 16px;

padding: 0px;
padding-left: 1.5pc;
/*
border-width: 1px;
border-style: solid;
border-color: #00f;
*/
list-style-type: none;
background: url("images--global/!system/list-style-image.gif") no-repeat 0px 1px;
}

So, you micro-position the bullet in the background items, and change
the spacing with margin-left and padding-left.

Anyway, this works well enough for me!

--Chris

"Gérard Talbot" <newsblahgroup@gtalbot.org> wrote in message
news:3qokasFg24ofU1@uni-berlin.de...
> Chris Kinata a icrit :
>
>
> Consistent List Indentation
> http://developer.mozilla.org/en/doc...ist_Indentation
>
> Girard
> --
> remove blah to email me

kchayka

2005-10-12, 10:23 pm

Chris Kinata wrote:
>
> it seems the conclusion is that there is
> no good solution involving list-image. Instead, use a background
> image with no-repeat

Before you go this route, consider those visitors who have image loading
disabled. They'll end up with no list marker at all, which may result in
a readability problem.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.