Color square Bullet points

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Dwight - 25 Jan 2006 16:12 GMT

Hi

I have the following simple code to show a square bullet

<ul>
<li type="square">Apples</li>
<li type="square">Pears</li>
<li type="square">Peach</li>
</ul>

How can I change the color of the bullet points from black to red?

TIA
Dwight

Reply to this Message

Bob Barrows [MVP] - 25 Jan 2006 16:46 GMT

> Hi
>
[quoted text clipped - 7 lines]
>
> How can I change the color of the bullet points from black to red?

You need to provide your own image using the css list-style-image property:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/liststyleim
age.asp

Signature

Microsoft MVP -- ASP/ASP.NET
Please reply to the newsgroup. The email account listed in my From
header is my spam trap, so I don't check it very often. You will get a
quicker response by posting to the newsgroup.

Reply to this Message

Dwight - 30 Jan 2006 11:27 GMT

Hi Bob,

Thanks for this.

It appears that this command applies to the whole web page, how can I apply
it to just some of the bullet points on the page.

For example

<li type="square">Apples</li> <-- Default square
<li type="square">Pears</li> <-- Show the colored gif
<li type="square">Peach</li> <-- Default square

TIA
Dwight

> > Hi
> >
[quoted text clipped - 10 lines]
> You need to provide your own image using the css list-style-image property:
> http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/liststyleim
age.asp

Reply to this Message

Bob Barrows [MVP] - 30 Jan 2006 11:49 GMT

> Hi Bob,
>
> Thanks for this.
>
> It appears that this command applies to the whole web page,

Huh?

> how can I
> apply
[quoted text clipped - 8 lines]
> TIA
> Dwight

Several options:
1. Define a class:

<style>
.coloredgif { list-style-image:url(dot.gif) }
</style>
<li type="square">Apples</li> <-- Default square
<li class-"coloredgif">Pears</li> <-- Show the colored gif
<li type="square">Peach</li> <-- Default square

2. Use inline style

<li type="square">Apples</li> <-- Default square
<li style="list-style-image:url(dot.gif)">Pears</li> <-- Show the
colored gif
<li type="square">Peach</li> <-- Default square

Signature

Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"

Reply to this Message

Dwight - 30 Jan 2006 17:00 GMT

Thanks you're a star, that worked a treat.

> > Hi Bob,
> >
[quoted text clipped - 33 lines]
> colored gif
> <li type="square">Peach</li> <-- Default square

Reply to this Message

Webmaster Forum / Browsers / Internet Explorer / January 2006

Color square Bullet points