PDA

View Full Version : How to color bullet points different to text in li tag


WotNow
12-30-2010, 08:24 AM
Hi I have an unordered list with list items and I am wanting to color the bullet points one color and the text a different color.
http://i605.photobucket.com/albums/tt133/WhatNowThe2nd/Kimberley%20Web%20Design/List_item.gif

Thanks!

Corrosive
12-30-2010, 08:31 AM
Use images for your bullets with the list-style-image property.

WotNow
12-30-2010, 08:42 AM
Thanks a lot!

Corrosive
12-30-2010, 08:49 AM
You are welcome as ever Amanda :)

Ricky55
12-30-2010, 09:53 AM
I actually think you have more control if you make the bullet image a background image of the li then just apply padding to create room. It depends on the size of your bullet. Corrosives method will work but won't give you any positioning control.

Corrosive
12-30-2010, 10:36 AM
I actually think you have more control if you make the bullet image a background image of the li then just apply padding to create room. It depends on the size of your bullet. Corrosives method will work but won't give you any positioning control.

That is true. I've sometimes had to fiddle for a while with image bullet points to get them lined up nicely.

WotNow
12-30-2010, 10:50 AM
Just took a screen shot of the bullet, saved it as a gif and did as corrosive suggested and it lined up like a dream. A win for once .. no mucking around .. guess i should check it in IE before I mouth off too much.:grin:

Corrosive
12-30-2010, 11:13 AM
guess i should check it in IE before I mouth off too much.:grin:

Ha, ha. Your experience of IE serves you well!

Ricky55
12-30-2010, 03:22 PM
Yes I would check in a few browsers as I've had to resort to my method to get them to line up. If it's just a straight forward circular bullet you may be ok.

edbr
12-31-2010, 12:46 AM
try this
li { color: #C00; }
li span { color: #0C0; }



<ul>
<li><span>List Item</span></li>
</ul>

Ricky55
12-31-2010, 04:52 AM
That won't work will it ed? All you're doing there is adding an additional tag that provides no further hooks to get at the bullet.

I was under the impression that the methods that we have discussed are the only ways to achieve this. It's a shame there's no list style type colour.

Ricky55
12-31-2010, 05:06 AM
I stand corrected ed sorry mate it does work I should have tested it before posting.

The other methods are still better though IMO as you don't need to add additional markup just for presentation.

edbr
01-01-2011, 07:13 AM
you may well be right , i just knew it could be done i have only used images myself, but its an alternate way and cant see it causing any major problem doing it this way