asked on

HOW DO I CHANGE THE COLOR OF BULLETS IN A BULLETED TEXT LIST?

Very simple question and premise. My text is going to be white against a darker background. I'd like to make it a bulleted list. The default bullet color is black. I want the bullet colorc to match the white text. Can this be done (please say yes) and if so, how do I do it?

The program is Dreamweaver MX / Windows XP Pro.

thanks in advance,

Syd Rabin

ASKER CERTIFIED SOLUTION

c_swanky

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

c_swanky

NOTE: You do NOT need the <font> tags around the <li> text

Here's a dark grey background with white text and bullets.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

</head>

<body bgcolor="#666666">
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>

Saqib Khan

Follow this Link to see a All Browser Compatible and standard solution...

https://www.experts-exchange.com/questions/10611281/Changing-bullet-color-HTML.html?query=Bullet+List+Color&searchType=topic#3196537

klykken

adilkhan, what is the compatible and standards compliant way on that page you are linking too?
The accepted answer is surely not.

-klykken

Saqib Khan

Comment from Webwoman

And neither is really 'correct', since you're nesting the tags incorrectly -- which means it may or may not work AT ALL.

The only reliable way to do it is to change the entire LI tag -- including the text.

Or use a graphic, which gives you the added option of using whatever you want for a bullet and making it mouseover if you wish.

And I personaly recommend using IMAGES as the bullets if you want to do any additional Stuff(Such as Custom Colors).
Again, There are so many possibilites and Ways.

klykken

IMHO c-swanky's suggestion above is completely correct, using the CSS properties to what they where intended for.
It also works in standard compliant browsers, no graphics, and it also means less code. Can you ask for more? :-)

-klykken

Saqib Khan

hey whatever Works best dude:).

c_swanky

@klykken - Thanks for the support. Not a big deal as long as the srabin1 finds the answer that works for him...

@adilkhan - Just out of curiosity how am I nesting the tags incorrectly? (is it because I put the closing </li> tags even though it can be done without them?)

<ul>
<li>one
<li>two
</ul>

Just playing around, I came up with this as well....

The character "l" (small-case L) in the Wingdings font face will give you a bullet image, so you could do something like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body bgcolor="#666666">
<p>Thing I want to do one day</p>
<blockquote>
<p>
<font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Fly a kit</font><br>
<font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Swim with the sharks</font><br>
<font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Start my own .com </font>
</p>
</blockquote>
</body>
</html>

@srabin1 - Basically you can do it ONE of the following three ways:

1) Use an Image
2) Use .css style sheets
3) Use the Wingdings font example above.

Let us know which one works for you?

webwoman

1) font tags are a REALLY bad idea, and deprecated.
2) you should ALWAYS close ALL tags, and nest things correctly. (the examples given were fine)
3) bullets are a pain in the butt unless you use an image. IE and Netscape/Mozilla do NOT render them the same. One applies the style to the bullet, one DOES NOT, so unless you use an image you have no control. Try it and see.

I usually wind up putting a span tag around the text, just to be sure that at least the list text is styled correctly. I rarely set a style for an li unless I'm doing something way more complex than the standard list - and then I'll use an image just so I KNOW I get what I want.

pepsichris

Maybe use

·

It's available on the character list in Dreamweaver, or just type it into the source, and it does the job. It responds to whatever font/style you're using. As long as you're okay with leaving an extra line then maybe use <blockquote> as well for the indentation of the list.

seanpowell

Good discussions about bullets, but unnecessary really, as Syd's original question makes an incorrect assumption:

The default bullet color is black.

The correct way of putting this is - the default "text" color is black. Whatever the text color is, that's the color of the bullets. You don't need all those font tags or li stylings. Just change the color of the body text:

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<ul>
<li>The are white bullets</li>
<li>And so are these</li>
<li>And these too...</li>
</ul>
</body>
</html>

Zeffer

a brilliant observation and solution seanpowell
another good example of not being able to see ones navel..if one is wearing clothes..
forest for the trees etc :)

so : srabin1.. points to him i think
please don't hold it against him that he criticized the form of your question..it was a necessary
and integral part of the answer.

Zeffer

seanpowell

I hope it didn't come out that way - I wasn't criticizing - just pointing out the context of the question which may have been leading some in the wrong direction. My apologies if it came out that way :-)