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
srabin1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

c_swankyCommented:
Place this inbetween your <head> tags

<style type="text/css">
<!--
li {color: red }
-->
</style>



FULL CODE EXAMPLE:





<!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">
<!--
li {color: red }
-->
</style>

</head>

<body>
<ul>
  <li><font color="#FF0000">one</font></li>
  <li><font color="#FF0000">two</font> </li>
</ul>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
c_swankyCommented:
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">
<!--
li {color: white }
-->
</style>

</head>

<body bgcolor="#666666">
<ul>
  <li>one</li>
  <li>two</li>
</ul>
</body>
</html>
0
Saqib KhanSenior DeveloperCommented:
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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

-klykken
0
Saqib KhanSenior DeveloperCommented:
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.
0
klykkenCommented:
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
0
Saqib KhanSenior DeveloperCommented:
hey whatever Works best dude:).
0
c_swankyCommented:
@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?







0
webwomanCommented:
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.
0
pepsichrisCommented:
Maybe use

&middot;

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.
0
seanpowellCommented:
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">
<!--
body { background-color: #333; color: #fff; }
//-->
</style>
</head>
<body>
<ul>
  <li>The are white bullets</li>
  <li>And so are these</li>
  <li>And these too...</li>
</ul>
</body>
</html>
0
ZefferCommented:
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
0
seanpowellCommented:
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 :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.