Weirdo CSS question
Goal: Gold square bullets with black text.
You'll have to save this to your own computer to see it work. I tried to set it up in the Audrey skin but it's being bizarre.
Anyway, without the bold, the everything is black. Even the square.
Any ideas what we're doing wrong?
UL {
color : #CC9900;
list-style-type: square;
}
LI B {
font-family : Arial;
font : 11pt;
color : black;
font-weight: normal;
}
<ul>
<li>Item one</li>
<li><b>Item two</b></li>
</ul>
- Item one
- Item two
4 Comments
Leave a comment
Good Causes
Silly Stuff
The weather in Boston
Well, I'm seeing all gold (Firefox 1.0.4 on XP SP2).
On my own machine, I see your code the way you intended. I just did a quick google and it seems that you are right - you need a tag of some sort surrounding the text of the bullet in order to change its color.
If you don't want to hack your bold tag, just surround it in a div with style="color:black;" - or, of course, give the div a class and specify color there.
You're on the right track.
Yeah, you basically have two options, use an image for the bullet that's gold. Or wrap the text in something.
I'd avoid using something like a div, it's overkill. "b" and "i" don't have anything semantically associated with them like "strong" or "em." So you could either give the actual b a class to style just them.
li b.dark {
font-family : Arial;
font : 11pt;
color : #000;
font-weight: normal;
}
Or you could just give the list itself an id or class so that you're not styling every instance of "b" in a list.
Hope that helps...
You can:
a) Use an image as shown in this Listamatic Tutorial (top one!)
(Jake also mentions this, but this gives more clarity as to how-to)
b) Set a class or id for the lists that will have gold bullets:
.goldBullets {
color : #CC9900;
list-style-type: square;
}
.goldBullets li b {
font-family : Arial;
font : 11pt;
color : black;
font-weight: normal;
}
This is similar to what Jake wrote in the closing of his post, and I think it's better to use to restrict the styling to just the goldbullet lists, instead of all lists with bold text.
Either way works, up to you!
Good job Adi, I should have been a little more helpful and gave links, etc. to get the ball rolling.