#1
  1. Rut row Raggy!
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2001
    Location
    Tornado Alley
    Posts
    560
    Rep Power
    31

    Question Need help w/using CSS for links


    I'm trying to setup an external style sheet that will display links as one color w/no underline in all stages except hover--in which it will be the same color, but underlined. My CSS code is listed below, as well as my HTML code:

    CSS--->
    A.white:link {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }
    A.white:active {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }
    A.white:hover {
    COLOR: #FFFFFF; TEXT-DECORATION: underline
    }
    A.white:visited {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }

    HTML--->
    <a class=white href="contact.php">Contact Us</a>

    However--when I visit a link, the link assums the properties of visited when I hover of it. I think I'm doing something wrong. Any ideas?
    Matt
  2. #2
  3. No Profile Picture
    slacker
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Penticton BC Canada
    Posts
    35
    Rep Power
    13
    Hello,

    the same thing happened to me. . .The links would not hover after being visited once. I assumed it was a bug in my browser (ie5.5)

    might have to work around it with JavaScript. . .
    Support the mob or mysteriously disappear!!
  4. #3
  5. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    Put your declaration for a:hover after your declaration for a:visited. Always put the :hover last, because that's the one you want to take precedence.
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2002
    Location
    Windsor, England
    Posts
    1
    Rep Power
    0

    Cool


    When using css it is generally the styandard to use pseudo classes for links in the following order:

    link--visited--hover--active (or "love...ha!")
    CSS--->
    A.white:link {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }
    A.white:visited {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }
    A.white:hover {
    COLOR: #FFFFFF; TEXT-DECORATION: underline
    }
    A.white:active {
    COLOR: #FFFFFF; TEXT-DECORATION: none
    }

    This should solve the problem.

    Peter
  8. #5
  9. Rut row Raggy!
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2001
    Location
    Tornado Alley
    Posts
    560
    Rep Power
    31
    bricker42's idea of placing the hover after visited worked. Thanks!
    Matt

IMN logo majestic logo threadwatch logo seochat tools logo