Set bullet color?

All Forums >> [Web Development] >> Cascading Style Sheets

Message

DarlingBri -> Set bullet color? (4/18/2004 18:08:42)
Hey... I'd like to set bullet colour on unordered lists, and while I know I can use an image to do that, I would prefer not to if possible. It just seems simple to me: the <li> bullet is by default black, and I want the exact same thing, except orange. How hard can it be? Except I can't find anywhere that says how to do it! Can anyone tell me how to add this to my style sheet? Thanks!

c1sissy -> RE: Set bullet color? (4/18/2004 18:32:45)
Hi Bri, you have to use an image as far as I know. I think that there is a thread in here somewhere that this was discussed a while back. I'll see if I can find it. But as far as I can remember, you have to use an image. Found it Here I hope that this helps you out.

d a v e -> RE: Set bullet color? (4/19/2004 2:47:46)
http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type it's a bit weird how they explain it but it seems that the bullet colour is the same as the text colour and if you want it different then use an image.

DarlingBri -> RE: Set bullet color? (4/19/2004 3:47:17)
Okie-dokie, thanks. That makes sense, it's just a bummer, as we used to say. (Does anyone under 30 say that anymore?)

Giomanach -> RE: Set bullet color? (4/19/2004 4:18:20)
Bugger but not bummer (oops just did lol)

DarlingBri -> RE: Set bullet color? (4/19/2004 4:48:08)
OK, so I used graphics instead and now this is all messed up. Here's my css: ul { margin: 10pt 0 0 0; padding: 0; } li { margin: 10; list-style-image: url('images/bullet.gif'); list-style-position: inside; border: 0px none;; padding-left:0; padding-right:15pt; padding-top:0; padding-bottom:0 } In mozilla, they appear as normal. In IE, there is no space between the bullet and the text and it looks awful. Is there a way to correct for that? Cheers!

Giomanach -> RE: Set bullet color? (4/19/2004 4:53:59)
to your li add: padding-left: 5px;

DarlingBri -> RE: Set bullet color? (4/19/2004 5:26:07)
that just shoved everything over 5, it didn't put any padding between the bullet and the text :(

d a v e -> RE: Set bullet color? (4/19/2004 5:28:25)
one thing is that you have margin: 10; but 10 what bummers, cabbages? try pixels, ems,. percentages (btw use points for print and pixels or percentages or other web based unit for visual work)

DarlingBri -> RE: Set bullet color? (4/19/2004 5:47:22)
Thanks for that catch :) OK now I have: ul { margin: 10px 0 0 0; padding: 0; } li { margin: 10px; list-style-image: url('images/bullet.gif'); list-style-position: inside; border: 0px none; padding-left:5px; padding-right:15pt; padding-top:0; padding-bottom:0 And I STILL have no spaces! http://dev.bb4l.org.uk/default.asp?f_id=9 Lovely in mozilla, ugly in IE :(

Giomanach -> RE: Set bullet color? (4/19/2004 5:51:38)
If using an image, why not add a little transparency the right hand side of it?

d a v e -> RE: Set bullet color? (4/19/2004 5:59:11)
have you tried it without the list style position 'inside' ? or did you specifically want that? also you have border: 0px none; which should be border: 0; or border:0px;

jaybee -> RE: Set bullet color? (4/19/2004 6:18:35)
I did it by setting the list colour in the style sheet and using a span on the text. Not brilliant but it works. <li><span class="orangebold">creative</span></li> You can see it on my homepage

c1sissy -> RE: Set bullet color? (4/19/2004 6:49:35)
Bri, you might need to do a different style sheet for IE. There are so many things that IE looks at differently. I posted soemthing earlier this week in regards to different style sheet for IE, and it works. This way in Mozilla your page will stay as it is while you try to tweak the page in IE. I wish I knew more to help you out on this one.[&o][&o] I have to be out most of the day today, if you dont' have an answer later on I'll do a search and see if I can find anything to help you out on this. I'm sure though that if Fiachra stops by, he might and most likely does know the answer to this one. <edit>ul { margin: 10px 0 0 0; padding: 0; } should be ul { margin: 10px 0px 0px 0px; padding: 0px; } Also, your order with your values should be top right bottom left. Not sure if this will help you or not. Right now, unless you know this already, and forgive me if you do, you have a top margin of 10 px. </edit>

Kitka -> RE: Set bullet color? (4/19/2004 7:57:49)
quote: And I STILL have no spaces! Hello Bri, I think you might have the image in the wrong place. The following seems to work for me, but you'll probably need to adjust the left margin. ul { list-style-image: url('images/bullet.gif'); margin: 10px 0 0 0; padding: 0; } li { margin: 10px; list-style-position: inside; border: 0px none; padding-left:5px; padding-right:15pt; padding-top:0; padding-bottom:0 ; } Good luck.

DarlingBri -> RE: Set bullet color? (4/19/2004 10:54:20)
Arrgh :) OK, I appreciate all the help but I couldn't make anything work, so I switched tactics. I used this menthod: http://css.maxdesign.com.au/listamatic/vertical05.htm And glory be, it works very similarly across all browsers!

c1sissy -> RE: Set bullet color? (4/19/2004 19:09:39)
quote: ORIGINAL: DarlingBri Arrgh :) OK, I appreciate all the help but I couldn't make anything work, so I switched tactics. I used this menthod: http://css.maxdesign.com.au/listamatic/vertical05.htm And glory be, it works very similarly across all browsers! Good site Bri, I should have thought about this one as I visit this site often for learning. They have some good things through out the max design site. Well worth spending some time going through all of the things in there. Hi Kitka, how are you doing? Great to see you![;)]

Kitka -> RE: Set bullet color? (4/20/2004 8:16:47)
quote: Hi Kitka, how are you doing? Great to see you! Many thanks for the greeting Deb! Great to see you too. I'm fine I guess, just terminally busy [;)] I don't get to stop by here anywhere near as much as I used to, but I guess life is like that, nothing stays the same. Hope all is well with you, and I'm praying that Mike gets home safely.

c1sissy -> RE: Set bullet color? (4/20/2004 8:40:15)
quote: Hope all is well with you, and I'm praying that Mike gets home safely. All is grand here. And thank you very much for the prayers for Mike. I know that all the prayers going upwards for him and his troops are working. I'll be so happy when he is home. Now we just need to pray that he is here for his sisters wedding In January. They changed their leave time[:@]. It was the begining of January, but now it is in december sometime.

gorilla -> RE: Set bullet color? (4/20/2004 10:09:25)
If you want you can use an • as a leader character and then offset the text as a hanging indent type thing. Its a bit crude and you have to use spans but it does work.

dmwhipp -> RE: Set bullet color? (5/16/2004 2:12:42)
HI. I came across this thread while trying to solve the same problem for a site I'm creating. I found a quick and easy CSS solution. I've only tested it in IE and Netscape, but it's working perfectly in both. Here's the site where I found the solution: http://www.sens.buffalo.edu/assistance/advwebpage/bullets.html and here's where I have it implemented: http://www.dwwebdesigns.com/flcompact/flcompact4.html Hope this helps. Deborah

Donkey -> RE: Set bullet color? (5/16/2004 7:12:39)
That's exactly the same solution posted above by jaybee but using <div> instead of <span>[;)] BTW welcome to the forum.

d a v e -> RE: Set bullet color? (5/16/2004 7:25:31)
quote: I'd like to set bullet colour on unordered lists, and while I know I can use an image to do that, I would prefer not to if possible. it all seems a lot of trouble to go to when css has a mechanism for setting bullet colour via image use (with your bullet of choice, should images be turned off, i.e. disc, etc). have you got a good enough reason not to use images that warrants all these work-arounds?!

Donkey -> RE: Set bullet color? (7/8/2004 20:28:57)

I've just worked out a very easy way to do this using css and the first-line property. The first line property defines the text colour. Obviously you can't have two line bullet points, but then if you do they are too long anyway.[;)]

This gives you a red bullet and black lettering.
Write this in the css

ul.red { 
position:relative;
list-style-position: outside;
color: #E5002B; 
text-indent: -2px; 
list-style-type: square; 
text-align: left;
left:-5%;
}
ul.red li{
font-family: Arial, Helvetica, Sans-serif;
font-size: 1em;
text-align:left;
}
ul.red li:first-line{color:#000;}

And the html:

<ul class="red">
 <li>A list item</li>
 <li>Another list item</li>
 <li>More of the same</li>
 <li>Etc etc etc</li>
 <li>Ad nauseum</li>
   </ul>

d a v e -> RE: Set bullet color? (7/9/2004 2:00:32)
interesting though this is , i'm so sorry but i don't understand why you can't just use an an image instead of these workarounds.

Donkey -> RE: Set bullet color? (7/9/2004 2:55:35)
It just seems easier and simpler code to me that's all. It's interesting that you say this is a workaround, as a non-professional I see the use of an image as the workaround, because it involves more work. I can see a reason for using an image if you want to have a specific bullet design (say part of a logo), but if you just want a square or circle then surely css is the easiest way.

d a v e -> RE: Set bullet color? (7/9/2004 3:35:11)
well i'm just going on the recommended way according to the spec, but maybe i'm just being too narrow-minded about this?! it would have been so much easier if they had specified bullet colour in the css spec!

Donkey -> RE: Set bullet color? (7/9/2004 4:46:42)
quote: it would have been so much easier if they had specified bullet colour in the css spec! I agree. My way does validate though.

jaybee -> RE: Set bullet color? (7/9/2004 5:32:17)
So does mine. [8D]

Donkey -> RE: Set bullet color? (7/9/2004 6:51:30)
quote: So does mine. I know, I was using your way before I "saw the light" so to speak, and it works perfectly, but the way I described above involves less effort and being fairly lazy by nature that's the clincher with me. Of course your way is best if the bullet points run into 2 or more lines each, but bullet points are meant to be on one line and short and to the point anyway.

Page: [1] 2 next > >>

6.201172E-02