Indention in UL, OL elements

[Chris Kinata]

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]

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" <ch***@kinata.com> wrote in message
news:ts********************@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]

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/docs...st_Indentation

Gérard
--
remove blah to email me

[Chris Kinata]

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" <ne***********@gtalbot.org> wrote in message
news:3q************@uni-berlin.de...

Chris Kinata a icrit :

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/docs...st_Indentation

Girard
--
remove blah to email me

[kchayka]

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.