CSS question

Discussion in 'ASP .Net' started by NWx, Feb 19, 2004.

  1. NWx

    NWx Guest

    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
     
    NWx, Feb 19, 2004
    #1
    1. Advertising

  2. NWx

    Fadi El-Eter Guest

    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.

    --
    Fadi El-Eter, itoctopus - http://www.itoctopus.com
    "NWx" <> wrote in message
    news:eTNn8#...
    > 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, Feb 19, 2004
    #2
    1. Advertising

  3. NWx

    Jon Guest

    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

    "NWx" <> wrote in message
    news:eTNn8%...
    > 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
    >
    >
     
    Jon, Feb 19, 2004
    #3
  4. NWx

    PeterMcC Guest

    NWx <> wrote in
    <eTNn8%>

    > 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.


    --
    PeterMcC
    If you feel that any of the above is incorrect,
    inappropriate or offensive in any way,
    please ignore it and accept my apologies.
     
    PeterMcC, Feb 19, 2004
    #4
  5. NWx

    NWx Guest

    Hi,

    Thank you all for your answers.

    Regards



    "NWx" <> wrote in message
    news:eTNn8%...
    > 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
    >
    >
     
    NWx, Feb 19, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    757
    clintonG
    Dec 24, 2004
  2. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    486
    Jukka K. Korpela
    Sep 9, 2003
  3. Replies:
    6
    Views:
    575
    Jonathan N. Little
    Mar 18, 2006
  4. AF
    Replies:
    17
    Views:
    623
    Nije Nego
    Aug 9, 2006
  5. richard
    Replies:
    12
    Views:
    781
    dorayme
    Mar 9, 2010
Loading...

Share This Page