PDA

View Full Version : Changing bullet point colours

rob
4th Nov 2006, 12:58 pm
Right so I have worked out how to change the style of the bullet point in a list as you saw in class the other week.

It is now bugging me that the bullet points are staying black as it doesn't match my colour scheme.

I have this at the moment in my CSS file.

ul{
list-style: square;
}

I have tried adding the colour after "square" and also tried "list-colour: #990000" but no luck

Help!:blink:

Rob
rob
4th Nov 2006, 01:11 pm
panic over and problem solved! :rolleyes:

ul{
list-style: square;
color: #990000;
}
francis
5th Nov 2006, 10:33 pm
Really? Does that work cross-browser so that the bullet is one colour and the text is another (I assume that's what you're trying to achieve)? I thought that was impossible unless you used images. If it only works in one browser, then it's not a solution, IMHO.

Now, this is will be cool (http://mezzoblue.com/archives/2006/11/01/counter_intu/) (in several years). And I really wish "run in" was available now (http://www.thinkvitamin.com/features/css/in-search-of-the-missing-run-in-value) - there's numerous instances where I could have used this recently instead of fiddling around with floats instead.
rob
6th Nov 2006, 08:49 am
Really? Does that work cross-browser so that the bullet is one colour and the text is another (I assume that's what you're trying to achieve)? I thought that was impossible unless you used images. If it only works in one browser, then it's not a solution, IMHO.



I was aiming to get both text and bullet the same colour as didn't like the fact bullet was still black and text was my chosen colour.

Have yet to try in another browser - if it doesn't work in various browser will report back otherwise take it I am ok! :)
David
6th Nov 2006, 09:42 am
Really? Does that work cross-browser so that the bullet is one colour and the text is another (I assume that's what you're trying to achieve)? I thought that was impossible unless you used images. If it only works in one browser, then it's not a solution, IMHO.

Francis/Rob, there is a cross-browser solution to the bullet one colour and text another colour problem. It's actually very simple:


<html>
<head>
<title>Bullet Colour</title>
</head>
<style>
li {
color: #D00;
}
li span {
color: #090;
}
</style>
<body>
<h1>An unordered list</h1>
<p>Bullet one colour and text another.</p>
<ul>
<li><span>List item number 1</span></li>
<li><span>List item number 2</span></li>
<li><span>List item number 3</span></li>
<li><span>List item number 4</span></li>
<li><span>List item number 5</span></li>
</ul>
</body>
</html>


Obviously, the solution is not ideal as it requires extra markup but it's the best way at the moment AFAIK.
francis
6th Nov 2006, 11:04 pm
Eeww. That's what I thought the solution was. I'd be inclined to either:

1: use a CSS background image (preferred approach)
2: use some unobtrusive JavaScript to insert the span tags (feels like overkill)
David
7th Nov 2006, 02:38 pm
Yep, the background image option is a good one but even that seems a little over the top and only works for <ul>. I used the <span> solution when I wanted my <ol> numbers/letters to appear emboldened. This is the only real solution for that.