<ul> list item bullet colors

[dp]

Is there anyway to have the bullet color of a <li> be a different color than
the text without using an image?
dp

[la_haine]

"dp" <no*********@hotmail.com> wrote in
news:Pi*************@newssvr33.news.prodigy.com:

Is there anyway to have the bullet color of a <li> be a different color
than the text without using an image?

quick and dirty way with extra markup:

<li><span>list1</span></li>

and in your stylesheet:

li {
color: #ff0000;
}

span {
color: #000000;
}

There may be a better way of doing this without the redundant markup - if
your list items are links then you could of course replace the span element
with an a element.

--
We generally describe the most repulsive examples of humanity's cruelty as
brutal or bestial, implying by these adjectives that such behaviour is
characteristic of less highly developed animals such as ourselves. In truth,
however, the extremes of 'brutal' behaviour are confined to humanity; and
there is no parallel in nature to our savage treatment of each other.
- Storr, 1968

[Claire Tucker]

On Mon, 26 Jul 2004 15:20:15 GMT, "dp" <no*********@hotmail.com>
wrote:

Is there anyway to have the bullet color of a <li> be a different color than
the text without using an image?
dp

In a CSS2-supporting browser, the bullet may be in the :before box of
the list item, so changing the color of this may work:

li:before {
color: pink;
}

However, in browsers which do not implement lists in this manner, this
will have no effect. At least when it doesn't work the viewer will
just see a normal-colored bullet. Most viewers won't even notice the
difference! :)

Best regards,
-Claire

[dp]

"Claire Tucker" <fa**@invalid.invalid> wrote in message
news:mj********************************@4ax.com...

On Mon, 26 Jul 2004 15:20:15 GMT, "dp" <no*********@hotmail.com>
wrote:

Is there anyway to have the bullet color of a <li> be a different color thanthe text without using an image?
dp

In a CSS2-supporting browser, the bullet may be in the :before box of
the list item, so changing the color of this may work:

li:before {
color: pink;
}

However, in browsers which do not implement lists in this manner, this
will have no effect. At least when it doesn't work the viewer will
just see a normal-colored bullet. Most viewers won't even notice the
difference! :)

Best regards,
-Claire

Thanks Claire,
Tried with latest versions of IE, Mozilla, Firefox and Opera, but no joy.
dp

[Claire Tucker]

On Thu, 29 Jul 2004 01:24:31 GMT, "dp" <no*********@hotmail.com>
wrote:

"Claire Tucker" <fa**@invalid.invalid> wrote in message
news:mj********************************@4ax.com.. .

In a CSS2-supporting browser, the bullet may be in the :before box of
the list item, so changing the color of this may work:

li:before {
color: pink;
}

Tried with latest versions of IE, Mozilla, Firefox and Opera, but no joy.

It looks like Mozilla Seamonkey (and Firefox) specify the default
rendering for lists using CSS1 list properties rather than CSS2
markers as I first assumed. (see res/html.css in the FireFox/Seamonkey
directory to see how Mozilla implements the rendering of each element.
Some of them are quite interesting...)

You could, theoretically, disable the CSS1 list properties and use
CSS2 markers instead, but in my testing I was left unsure of whether
Opera and Firefox were actually respecting the marker properties or if
they were just ignoring it and making regular generated content:

ul {
list-style: none;
}
ul li:before {
display: marker;
content: "\2022 ";
color: #0000ff;
}

Since IE doesn't support generated content or :before, it'll render
this without any bullets at all. You may like to "hide" the first rule
from IE by using a child selector, which IE doesn't support and will
thus skip:

body > ul {
list-style: none;
}

This will make the lists appear with non-special bullets in IE, but
your colored bullets will now, of course, only work right if the list
is a direct child of the BODY element.

Also, exploiting a browser's lack of support of something to hide
things from it is a risky business for a number of reasons, most
notably because a future version of IE might support child selectors
but not generated content, or vice-versa. In the latter case, you
might end up with two sets of bullets! That's not to mention that
there might already be a browser out there in the wild which supports
generated content but not child selectors. Beware.

Best of luck,
-Claire

[Chris Morris]

Claire Tucker <fa**@invalid.invalid> writes:

Since IE doesn't support generated content or :before, it'll render
this without any bullets at all. You may like to "hide" the first rule
from IE by using a child selector, which IE doesn't support and will
thus skip:

body > ul {
list-style: none;
}
Note that this only hides from Windows IE.

To hide from both Windows and Mac IE (which I think is better in this
case), use
ul,[IEhide] {
list-style: none;
}
This will make the lists appear with non-special bullets in IE, but
your colored bullets will now, of course, only work right if the list
is a direct child of the BODY element.

A good way around this one is "html>body ul {...}" (all ul that are
descendants of a body that is a direct child of a html - i.e. all of
them)

--
Chris

[Brian]

Claire Tucker wrote:

You may like to "hide" the first rule from IE by using a child
selector, which IE doesn't support and will thus skip:

body > ul { list-style: none; }

ITYM IE/Win -- IE 5/Mac does child selectors just fine -- but even that
is wrong. IE/Win will not ignore this rule; it will treat it like a
descendent selector:

body ul {}

To hide it, there must be no spaces in the rule, like so:

body>ul {}

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Claire Tucker]

On Thu, 29 Jul 2004 10:42:47 -0400, Brian
<us*****@julietremblay.com.invalid> wrote:

Claire Tucker wrote:

You may like to "hide" the first rule from IE by using a child
selector, which IE doesn't support and will thus skip:

body > ul { list-style: none; }

ITYM IE/Win -- IE 5/Mac does child selectors just fine -- but even that
is wrong. IE/Win will not ignore this rule; it will treat it like a
descendent selector:

body ul {}

To hide it, there must be no spaces in the rule, like so:

body>ul {}

I was quite surprised to read this, since I've been doing the "trick"
as I described it for a few years now despite my better judgement. I
knocked up a quick test, and found that the way I wrote it confounds
IE as well. What IE is doing with it I have no idea; It did seem to be
the case that IE was considering it invalid and doing
forward-compatible skipping in this case, though, as adding further
valid selectors didn't convince IE to apply the suggestion:

div > p, h1 {
font-size: 2em;
color: blue;
}

The h1 element in my test document remained unaffected, as I'd hoped.

Does IE5 on Mac support :before and generated content, I wonder?

All the best,
-Claire

[gretelob]

Is there anyway to have the bullet color of a <li> be a different color than
the text without using an image? dp

Is there an answer to this?