Forum Moderators: not2easy
I'm having a bit of trouble with style sheets and links. I have changed the default settings for my links to this:
A:link {color: #696969; font-family: verdana, arial; font-size: 9pt; font-weight: bold; text-decoration: none}
A:hover {color: #696969; font-family: verdana, arial; font-size: 9pt; font-weight: bold; font-style: italic; text-decoration: none}
A:visited {color: #696969; font-family: verdana, arial, Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: bold; text-decoration: none}
but I also have another set of link styles like this:
A.email:link {color: #0000FF; font-family: verdana, arial; font-size: 9pt; text-decoration: none; font-weight: none}
A.email:hover {color: #0000FF; font-family: verdana, arial; font-size: 9pt; text-decoration: none; font-style: italic; font-weight: none}
A.email:visited {color: #0000FF; font-family: verdana, arial; font-size: 9pt; text-decoration: none; font-weight: none}
However, when I use the "email" class, it puts the link in bold even though font-weight and text-decoration is set to "none". It is the same as "orange" class below:
A.orange:hover {color: #FF9900; font-family: verdana, arial; font-size: 9pt; text-decoration: none; font-style: italic; font-weight: none}
This changes to bold and italic when I use it, even with text decoration, font style and font-weight set as "none".
Can anyone tell me why this is?
I want the default links to be dark grey and bold, the email links to be blue and not bold, and the orange links to be orange (surprsingly), not bold and not italic when you hover over them.
even though font-weight and text-decoration is set to "none"
The "default" setting for both font-weight and font-style is "normal," not "none." By setting them to none, you are sending the browser a property value it cannot read, and therefor it simply (and rightly) applies all applicable styles (in this case the italics and bold from your non-specific anchor styles) and moves on.
See the W3 specs on font-weight [w3.org] and font-style [w3.org] for property:value details. And, by the way, Welcome to WebmasterWorld!
cEM
