On 7/5/06, John Haas <[EMAIL PROTECTED]> wrote (about
http://www.manapedesign.com/21dems):
> Now, if you got to "About Us" and look at the HTML source for that
> secondary nav, you'll see that I have a class being dynamically inserted
> into the <a> to mark the page you're currently on:
> class="active"
>
> For that active class, I have the link being bold. This works fine in
> Firefox, but alas, IE does not render those links as bold as they should.
Hi, John,
The reason has to do with your CSS order. Currently you have:
#secondary a.active {
font-weight:bold;
}
#secondary a:link {
font-weight:normal;
text-decoration:none;
}
#secondary a:visited {
font-weight:normal;
text-decoration:none;
}
#secondary a:hover {
font-weight:bold;
text-decoration:none;
}
#secondary a:active {
font-weight:bold;
text-decoration:none;
}
As it happens, pseudo-classes have the same weight as regular classes.
So all of these rules use one id, one element, and one class to
identify the element to aply the style to.
Since they all have the same weight, the browser will take the last
value identified for the property. For the .active link, it will take
the bold from the .active rule, then unbold it with the :link or
:visited rules.
If you want the .active rule to override the :link and :visited rules,
place it after the :link and :visited rules. Or change your selector
to include those pseudo classes, so that
a.active
becomes
a:link.active, a:visited.active
This can make it clearer that the bolding from the active class should
take precedence over the normal link styling.
HTH,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
