http://tinyurl.com/8a4au
Charles,
you are trying to combine a pseudo-element with a pseudo-class on the
links in your nav list:
<div id="header">
<ul id="nav">
<li id="current"><a href="#">Home</a></li>
<li><a href="#">Who We Are </a></li>
...
#header a:first-letter { color: red; } /* A */
#header a:hover { color: red; } /* B */
which is not possible in IE/Win - in a direct way. As already mentioned,
IE tends to have some specificity - and other - problems [1].
Peter Williams provided a good fix in changing the specificity, which
I'd like to discuss a bit:
#header a:first-letter { color: red; } /* A */
#header #nav a:hover { color: red; } /* PW */
This fix does it well, unless you are defining the next element on your
page, say
#nextone a:hover { color: green; } /* C */
<div id="nextone">
<a href="#">Next</a>
</div>
Frustratingly, this link does not react on hover (does not become
green), because of the rule A, absurdly ignoring the fact that this is
completely unrelated to C.
And even if you'd replace the first rule A by D for some reasons
#nonexistentid a:first-letter { color: green;} /* D */
#header a:hover { color: red; } /* B */
any link would get a /red/ first letter on /hover/, the rest remains black.
So the problem is not only the specificity bug, but affects
pseudo-elements/pseudo-classes in IE/Win in general, I fear.
You could try to transform this rule A into something which does
basically the same:
#header li *:first-letter { color: red; } /* ICh */
#header a:hover { color: red; } /* B */
Here, the pseudo-element is not /directly/ assigned to the link, and
does not (?) interact with subsequent links.
Since this is not a hack, it should be allowed to use it without
conditional comments ...
But there could be more side-effects, so I recommend to omit the use of
pseudo-elements in IE6 at all.
Ingo
[1] http://www.satzansatz.de/cssd/pseudocss.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
