space between li

[ellenmarie]

I see a lot of discussion about how to remove the space between list items. I would like to be able to add space. Can anyone help? I would like to have 10px or so between each vertical list item.

thanks,
ellen

[appi2]

<style type="text/css">
li {padding-top:10px;}
</style>

one way!

[ellenmarie]

Thanks, sometimes I try and make things more complicated than they really are.

One problem. I have an image bullet for the list. It lines up great in FF but in IE the text drops below the bullet. Any hacks for that?

[createErrorMsg]

one way!

Here's another: li{line-height:2.0em;}

Adjust to suit your needs. This ought to keep the bullets and text lined up as both will be rendered in the middle of the LI, which will now be as tall as the line-height you've specified. Note that this will cause other problems should your list item text ever wrap to a new line. In such a case, you're better off using margin or padding as suggested above.

in IE the text drops below the bullet

This will probably depend on HOW the image bullet is created. DId you use the list-style-image property, or set the image as a background on the LI? If the latter, you can set the top position of the background property to match the padding and it should move down an equal amount...

li{background-position:10px left;}

If it's the list-style-image property, try using margin instead of padding to create the space and see if that works any better.

cEM

[ellenmarie]

Thanks. I tried a couple of things and discovered that all I needed to do was switch the

li.d
{padding-top: 10px;}

to

li.d
{padding-bottom: 10px;}

Go figure. Thanks for everyone's help.

[appi2]

As in ... this is one way of doing it.
;)
Iwuz tryin t save cod