SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confusion with link colors

    I am trying to use two different sets of link colors. I have set one set of colors in a class called "normallink" and the regular set of link colors for normal text situations. The colors and underline get confused. I set the text decoration to none. But a link with the normallink class will have the color of the standard active link color. Also the underline will appear. I assume this has something to do with inheritance. Any help would be appreciated.
    Texas Pete



    Code:
    .normallink a:link {text-decoration:none; color:rgb(0,0,255); }
    .normallink a:active {text-decoration:none; color:rgb(200,230,240); }
    .normallink a:hover {text-decoration:none; color:rgb(175,50,69); }
    a:link {text-decoration:none; color:rgb(0,0,255); }
    a:active {text-decoration:none; color:rgb(200,230,240); }
    a:hover {text-decoration:none; color:rgb(175,50,69); }

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,368
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It looks like an inheritance issue with the code you provide.

    A good approach is to set default link styles first, then variations afterwards...

    Code:
    /* default styles */
    a:link {text-decoration:none; color:rgb(0,0,255); }
    a:active {text-decoration:none; color:rgb(200,230,240); }
    a:hover {text-decoration:none; color:rgb(175,50,69); }
    
    /* custom styles */
    .normallink a:link {text-decoration:none; color:rgb(0,0,255); }
    .normallink a:active {text-decoration:none; color:rgb(200,230,240); }
    .normallink a:hover {text-decoration:none; color:rgb(175,50,69); }
    ...that way all links will be styled using the default unless you provide a custom version

  3. #3
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,232
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    I may be missing something, but I don't see any differences between your two sets of rules there.

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TechnoBear, Your not missing anything. I have been working at this so long. I have allowed the same rules to apply. Duh? Thank you so much. I will make appropriate changes. A new set of eyes is always helpfull.
    Texas Pete

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,232
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    I know that feeling so well. Glad I could help. (Although I'm not sure SuperTed would approve ... )

  6. #6
    Non-Member creativeprojects's Avatar
    Join Date
    Feb 2014
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I think you should be more specific about color in your code as if you want your normal link to be in red color then instead of writing rgb write the name of a specific color and for other/customized links write the name of any other color.

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,232
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by creativeprojects View Post
    I think you should be more specific about color in your code as if you want your normal link to be in red color then instead of writing rgb write the name of a specific color and for other/customized links write the name of any other color.
    RGB values are a perfectly acceptable way of expressing colour in CSS, as are hexadecimals e.g. #FF0000.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Don't forget that the order of these is important. This is the wrong order:

    Code:
    a:link {text-decoration:none; color:rgb(0,0,255); }
    a:active {text-decoration:none; color:rgb(200,230,240); }
    a:hover {text-decoration:none; color:rgb(175,50,69); }
    To avoid unexpected behavior, the order should be—
    Code:
    :link
    :visited
    :hover
    :active
    Of course, it doesn't matter if you leave some out, but the order is imporant.

    There are various mnemonics for this, such as LoVe—HA!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •