line item spacing

[famtek]

I have an <UL> with numerous <li> and want to increase the spacing between each <li>.
Would also like to modify space between the bullet and the text.
Where can I find more thorough details on modifying lists.

Help. thanks.

 

[cLFlaVA]

the simple answer is to increase the <li>'s top- and/or bottom-padding (or margin).

there are dozens of helpful resources on the web, just do a search for "css styling lists".



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

http://alistapart.com/articles/taminglists/

This is a good article on dealing with lists, however, I don't know if it truly touches whatever you want. If you want to control the gaps between list items, work with top/bottom margins on li elements. If you want to control the difference from the bullet to the text, you will have to use list-style-position: outside;. I don't think inside position has an option of setting different spacing. Then play around with the left padding on the li element again.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[famtek]

The margin works great. Is there any way to change the bullet color without changing the text?

thanks.

 

[gmmastros]

I don't know about that, but you could use CSS to use whatever image you wanted. If that image looked like a purple dot, or a green star, then you would get your desired affect. You could do this with the list-style-image attribute, like this...

<ul>
	<li style="list-style-image:url([URL unfurl="true"]http://www.tipmaster.com/images/blush.gif)">Item[/URL] 1</li>
	<li style="list-style-image:url([URL unfurl="true"]http://www.tipmaster.com/images/blush.gif)">Item[/URL] 2</li>
	<li style="list-style-image:url([URL unfurl="true"]http://www.tipmaster.com/images/blush.gif)">Item[/URL] 3</li>
</ul>

-George

Strong and bitter words indicate a weak cause. - Fortune cookie wisdom

 

[cLFlaVA]

i believe some browsers will change the bullet color if you set the "color" style for the UL itself. you'll need to specifically set the LI to a different color if you don't want them to be the same color as the bullets.

however, i recommend using an image as George said, or not worrying about it - since it's not 100% compatible.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]