Topic: Space Between LI's (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=10987" title="Pages that link to Topic: Space Between LI&amp;#039;s (Page 1 of 1)" rel="nofollow" >Topic: Space Between LI&#039;s <span class="small">(Page 1 of 1)</span>\

 
Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 06-17-2003 01:40

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).]

JKMabry
Maniac (V) Inmate

From: out of a sleepy funk
Insane since: Aug 2000

posted posted 06-17-2003 02:00

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

that'll do it!

Jason

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted posted 06-17-2003 02:20

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-17-2003 04:25

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-17-2003 16:20

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.

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 06-18-2003 20:23

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:

code:
#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?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-18-2003 20:37

I believe marker-offset is what you want.

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 06-18-2003 21:20

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

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 06-19-2003 01:50

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



Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 06-19-2003 21:47

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

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


Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-20-2003 04:55

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu