space between <li>

[Rafal 'Raf256' Maj]

Hi,
how cen I set vertical space between <li>'s in some <ol> to be i.e. 20px?

to have:

1. ble ble ble ble
ble ble ble ble ble


2. ble ble ble ble
ble ble ble ble ble



instead of


1. ble ble ble ble
ble ble ble ble ble
2. ble ble ble ble
ble ble ble ble ble


Nest if I can only set something in CSS style of parent <ol>... if it is
not possible, what should I set in each <li> (padding-top I quess?)

 

[Mark Parnell]

Hi,
G'day.

how cen I set vertical space between <li>'s in some <ol> to be i.e. 20px?

Nest if I can only set something in CSS style of parent <ol>... if it is
not possible, what should I set in each <li> (padding-top I quess?)

Setting the padding on the <ol> wouldn't work, as that will only add
padding around the whole list, not each item. Padding-top and/or
padding-bottom on the <li> would be the way to go. I'd suggest adding
10px of each.

 

[Rafal 'Raf256' Maj]

(e-mail address removed)

Setting the padding on the <ol> wouldn't work, as that will only add
padding around the whole list, not each item. Padding-top and/or
padding-bottom on the <li> would be the way to go. I'd suggest adding
10px of each.

I found that the most nice solution seems to be

ol.wide > li { margin: 10px 0px; }

but it doesnt work under IE... well since like another reasont to promote
the ****-IE and get-a-real-browser site's

 

[Rafal 'Raf256' Maj]

(e-mail address removed)

Setting the padding on the <ol> wouldn't work, as that will only add
padding around the whole list, not each item. Padding-top and/or
padding-bottom on the <li> would be the way to go. I'd suggest adding
10px of each.

I found that the most nice solution seems to be

ol.wide > li { margin: 10px 0px; }

but it doesnt work under IE... well seems like another reasont to promote
the ****-IE and get-a-real-browser sites

 

[Mark Parnell]

ol.wide > li { margin: 10px 0px; }

Why not use

ol.wide li { margin: 10px 0px; }

That _will_ work in IE. The difference is that it will be applied to
any <li> within <ol class="wide">, rather than just the first level.
Unless you have nested lists, the net effect is the same.

 

[mscir]

(e-mail address removed)


I found that the most nice solution seems to be

ol.wide > li { margin: 10px 0px; }

but it doesnt work under IE... well seems like another reasont to promote
the ****-IE and get-a-real-browser sites

How about margin-top, looks consistent in my IE6, Netscape 7.1, Firefox 0.8:

..li_top {
margin-top: 20px;
}

<UL>
<LI>
<H2>HTML Document Type Definitions</H2>
<UL>
<LI><A HREF="html.dtd">HTML 2.0</A></LI>
<LI><A HREF="HTML32.dtd">HTML 3.2</A></LI>
<LI class="li_top"><A HREF="strict.dtd">HTML 4.0 Strict</A></LI>
<LI><A HREF="HTMLlat1.ent">Latin-1 Entities</A></LI>
<LI><A HREF="HTMLsymbol.ent">Symbols and Greek Letters</A></LI>
<LI class="li_top"><A HREF="HTMLspecial.ent">Other Special
Characters</A></LI>
</UL>
</LI>
</UL>

 

[Keeper]

<ol>
<li>blebleblebleblebel
bleblebelbel<br>
<br></li>
<li>bleblebleblebel
blebelbelebl<br>
<br></li>
</ol>

is about the simplest way to do this, with out messing with CSS.
very simple. very noobish.. but it works

Later,
Keeper

Hi,
how cen I set vertical space between <li>'s in some <ol> to be i.e. 20px?

to have:

1. ble ble ble ble
ble ble ble ble ble


2. ble ble ble ble
ble ble ble ble ble



instead of


1. ble ble ble ble
ble ble ble ble ble
2. ble ble ble ble
ble ble ble ble ble


Nest if I can only set something in CSS style of parent <ol>... if it is
not possible, what should I set in each <li> (padding-top I quess?)



--
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~l-.~~~~~~~~~~~~~~~~~~~
GG-1175498 ____| ]____,
Rafal 'Raf256' Maj X-( * )
Rafal(at)Raf256(dot)com ,"----------"

 

[Mark Parnell]

is about the simplest way to do this, with out messing with CSS.

And why would you want to add two line breaks to every list item instead
of adding 1 line to your CSS?

BTW: Please stop posting upside-down
http://www.allmyfaqs.com/faq.pl?How_to_post

 

[Jukka K. Korpela]

is about the simplest way to do this, with out messing with CSS.
very simple. very noobish.. but it works

Thank you for making the bogosity of your comment so obvious by using
upside-down fullquoting. Please do not stop using it before you have a
useful contribution to make, or at least understand the question. TIA.

 

[Toby A Inkster]

is about the simplest way to do this, with out messing with CSS.
very simple. very noobish.. but it works

No it doesn't -- it won't be 20px.

 

[Jukka K. Korpela]

Why not use

ol.wide li { margin: 10px 0px; }

That _will_ work in IE. The difference is that it will be applied
to any <li> within <ol class="wide">, rather than just the first
level. Unless you have nested lists, the net effect is the same.

And if you do have nested lists, you can take special measures to deal
with them, such as
ol.wide ul li { margin: 0; }

But why 10px? It looks very silly (as if it were a rendering error or
something), if the font size is, say, 60px, which might be the smallest
font size that the user can read.

ol.wide li { margin: 0.6em 0; padding: 0; }

or something like that will work better. I'm including the padding
property just for safety: if some browser uses vertical padding between
list items by default, the above would result in excessive spacing unless
the padding is set to zero.