CSS question

[NWx]

Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks as
defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition 2, but
in this case hyperlink uses defaults for the page in all cases except hover
case. How should my CSS definitions looks, to be able to define its aspect
in all situations (hover, active, link and visited), and of course, to have
them different.

Thank you

 

[Fadi El-Eter]

Your definition 2 can be like this to solve the problem:
A.HWHeaderLink {
font-weight: normal;
font-size: 11px;
color: yellow;
font-family: Verdana;
background-color: #0000cc;
}

try it.

 

[Jon]

Hi,
you have to define link styles in this order Link - Visited - Hover -
Active. Reason is in CSS the style closest to the elements always wins, so
if you had for example
a:hover{
color:red;
}
a:visited{
color:blue;
}
When you hover over a visited link both of those styles could apply (the
link is visited and being hovered over) but because visited is closest to
the element it wins - result the hover colour will never show on visited
links. But if you did it like this
a:visited{
color:blue;
}
a:hover{
color:red;
}
the hover style will show correctly.

Jon

 

[PeterMcC]

Hi,

Can someone explain me how can I set a CSS for a hyperlink?

I have the following definitions in .css file

/* definition 1*/
A.HWHeaderLink:hover

{

font-weight: bold;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #6699ff;

}

/* definition 2*/
A.HWHeaderLink:visited, A.HWHeaderLink:active, A.HWHeaderLink:link

{

font-weight: normal;

font-size: 11px;

color: yellow;

font-family: Verdana;

background-color: #0000cc;

}

And I have a hyperlink with cssclass="HWHeaderLink"

If I let those both CSS sections in CSS file , the link always looks
as defined in Definition 2, even if I move mouse over it

If I want the activate the hover effect, I have to remove definition
2, but in this case hyperlink uses defaults for the page in all cases>

define its aspect in all situations (hover, active, link and

visited), and of course, to have them different.

except hover case. How should my CSS definitions looks, to be able to

Links should be defined in the order: link, visited, hover, active -
otherwise, when the link fulfils two of the definitions, e.g. a visited link
over which you are hovering, the latter definition takes precedence - the
way you have them the hover is defined first and so will be over-ridden by
other applicable definitions.

I'd also caution against changing font weight in the hover - it can make the
page twitch as the hover text enlarges, pushes the other elements to make
room for itself and then contracts to normal weight when the mouse moves on.

And, since I've started down the "whilst I'm about it" route, Verdana is not
a good choice since, if the user doesn't have it installed, the fall-back
font (often Arial) is likely to be significantly harder to read than the
Verdana. Text which is legible when viewed in Verdana can become too small
to read in Arial. Compare the 10px Verdana with the 10px Arial at
http://www.virtuelvis.com/archives/146.html

The Verdana problem is exacerbated by the use of px - IE users will not be
able to resize the text to suit their own browser needs and 11px Arial is
likely to be quite hard for a lot of folks to read. I'd recommend using % or
em for font sizes so that they can be adjusted to fit the needs of the
visitor.

 

[NWx]

Hi,

Thank you all for your answers.

Regards