SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: A tag problem

  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Waco, TX
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A tag problem

    Hello.. I'm new at this CSS thing and having trouble displaying my links the way I want to. I want the links to look just like the body text until hovered over, at which point I want the color to change and an underline to appear. Dreamweaver has gotten me to this point without a problem, but the issue arrives when dealing with visited links. I want visited links to look just like the unvisited links, but instead the visited links are following the settings for visited links even when I hover on them. When I tried just eliminating the settings for visited links, they reverted back to the default for vlink, that dark purple underlined, and still didn't follow the style for hover on subsequent clicks.

    Here is the embedded style I'm using:

    Code:
    <!--
    a:hover {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline}
    a:link {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none}
    a:active {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline}
    a:visited {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none}
    body {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF}
    -->
    You can also view a simplified html version of my problem at http://www.blakeformayor.com/blahblah.html.

    I know there's got to be a very simple solution to this problem, as I've seen this done on about 4 million web pages. Thanks in advance for your help.

    Blake

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not positive, but you're missing a final ; on every line of the stylesheet. Try this:
    Code:
    <!--
    a:hover {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; }
    a:link {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; }
    a:active {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #66FF99; text-decoration: underline; }
    a:visited {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; text-decoration: none; }
    body {  font-family: Helvetica, sans-serif, "Arial Black"; font-size: 10px; color: #FF00FF; }
    -->
    This could conceivably cause problems in browsers! Other than that, your CSS looks fine.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The order for link pseudo-classes is link, visited, hover, active (LVHA). Try this:
    Code:
    a:link, a:visited {
        background-color: transparent;
        color: #ff00ff;
        text-decoration: none;
    }
    
    a:hover, a:active {
        background-color: transparent;
        color: #66ff99;
        text-decoration: underline;
    }
    
    body {
        background-color: #ffffff;
        color: #ff00ff;
        font-family: Helvetica, sans-serif, "Arial Black";
        font-size: 10px;
    }

  4. #4
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye, the order you list them in in your style sheet gives them precedence over one another.
    $slider = 'n00b';

  5. #5
    SitePoint Member
    Join Date
    Nov 2002
    Location
    Waco, TX
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Ah... I see.

    Thanks so much for the advice, it works just the way I want it to now!

    Blake


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
  •