Topic: Space Between LI's

Do we even talk about plain ol' CSS in here?

What I want to do is add a bit of line space between line items in an unordered list. Not between every line, just between the last line of one item and the first line of the next item.

In other words, what was this...

* Here is the first item
   that is in the list.
* Here is the second item
   that is in the list.

...becomes...

* Here is the first item
   that is in the list.

* Here is the second item
   that is in the list.

I don't want a full line in-between, mind you. I can do that by adding a <P> before the <LI>. I want a controllable amount of vertical space.

For the life of me, I can't figure out how to do it without using spacer images.




[This message has been edited by Wes (edited 06-17-2003).]

li {
padding-bottom : 100px;
font : 12px verdana;
}

that'll do it!

Jason

JKMabry: That'll more than do it you prankster

Wes:

quote:

---

Do we even talk about plain ol' CSS in here?

---

No we discuss that in the CSS forum

Now where did we put it??

There are further complications due to the odd box models used in LI - I'll dig out a link.......

[edit: Ahhhhhhhhh its this one:
http://devnull.tagsoup.com/list/

should prove useful

I'll also move this to the CSS forum.................]

___________________
Emps

FAQs: Emperor

God. I just typed like 5 paragraphs for you, and lost it all because my password was incorrect. Thanks to the forum software for telling me to "use my back button."

Anyway, the points I made in a much shorter form:

1. I suggest you use margins instead of padding. I had a long explanation of why, which boiled down to "margins are "inbetween" the LI's, and padding is "within" the LI's, and you said you wanted the space "inbetween" them." The only visible difference occurs when you start using borders. However, with margins, you can also do the following:

margin-top:100px;
margin-bottom:100px;

And the margins inbetween the LI's will "collapse", leaving 100px of space, and there will be 100px of space on the top and bottom of the UL.

2. Different browsers handle list margins and padding extremely differently. You might want to manually specify all margins and padding for UL and LI elements in order to have complete control over the presentation of your list. See http://www.alistapart.com/stories/taminglists/ for more.

1) Yep, as Slime said, use margins in this case (of course, you may want padding as well, but for the space between, use margins...)

2)

quote:

---

I can do that by adding a <P> before the <LI>.

---

Ack! You heathen! Don't say such things!
That's a structural blasphemy.

D'oh! So, this is where CSS goes. How did I miss that?

Okay, so placing the UL inside a DIV as suggested by Slime's link, the following seems to do what I want:

#home-clearances-list {

	width: 320px;

	margin-left: 25px

	}

#home-clearances-list ul {

		font-size: 12.4px;

		font-family: geneva, arial, helvetica, sans-serif;

		list-style-image: url(images/bullet_arrow_right.gif);

		list-style-type: disc;

		padding: 0px;

		margin: 0px;

		margin-left: 2em;

		}

#home-clearances-list li { margin-bottom: 10px }

Of course, in NN4, it just goes cuckoo-caca, but what can ya do?

The only inconsistency I'm seeing between browsers now is the distance between the bullet and the text. When I use an image as the bullet, it provides good space in IE6 and NN6, a modicum of space in Op6, but no space at all in Op7.

Is there a way to control the space between the bullet image and the text?

I believe marker-offset is what you want.

Unfortunately, it doesn't look like it's supported, at least in IE6.

Well, if it already works in IE6, set it so it works how you want it in Opera

Ugh...still can't get it to work in Opera.

Sometimes it's just easier to add a few pixels to the image.

Are you specifying all margins and all paddings of both UL and LI elements? Make sure you're doing that.