#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    an hour away from L.A., California
    Posts
    132
    Rep Power
    13

    CSS for links isn't working


    I can't seem to override my browser settings. I searched this forum for other posts relating to *hover* and actually just copied and pasted someone else's stylesheet into my doc just to see if it would work... doesn't.

    Here is the CSS code in my <head> tag:

    <style type="text/css">
    <!--
    .links {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #5F7383;
    text-decoration: none;
    }
    a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #5F7383;
    text-decoration: none;
    }
    a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006A92;
    text-decoration: underline;
    }
    a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006A92;
    text-decoration: none;
    }

    }
    -->
    </style>

    Then my <a href> tag looks like this:
    <a href="G4.HTM" class="links">Sold Items</a>

    Can someone tell me what I'm doing wrong?
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    Wisconsin
    Posts
    134
    Rep Power
    45
    Did you put the <style> in the head? <head><style>....</style></head>

    copy this code and see if it works, it works on my browser

    <html>
    <head>
    <title></title>
    <style type="text/css">
    <!--
    .links {font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    a:link {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #5F7383;
    text-decoration: none;
    }
    a:visited {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #5F7383;
    text-decoration: none;
    }
    a:hover {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: red;
    text-decoration: underline;
    }
    a:active {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #006A92;
    text-decoration: none;
    }

    }
    -->
    </style>
    </head>
    <body>


    Then my tag looks like this:
    <a href="G4.HTM" class="links">Sold Items</a>
    </body>
    </html>
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    an hour away from L.A., California
    Posts
    132
    Rep Power
    13
    Yeah I had the script in the headtags. I tried your version all by itself on a page, and still the colors I set in IE are what shows. I looked at in netscape and no colors show at all except blue.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Code:
    <style type="text/css">
    
    a:link.links, a:visited.links, a:hover.links, a:active.links {
    	font: bold 14pt Verdana, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    }
    a:link.links {
    	color: #5F7383;
    }
    a:visited.links {
    	color: #5F7383;
    }
    a:hover.links {
    	color: #006A92;
    	text-decoration: underline;
    }
    a:active.links {
    	color: #006A92;
    } 
    
    </style>
    http://www.meyerweb.com/eric/css/link-specificity.html
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Location
    an hour away from L.A., California
    Posts
    132
    Rep Power
    13
    This is closer because the link color is accurate, but no change on hover, etc. I changed the colors to the style to be more distinct:

    <style type="text/css">

    a:link.links, a:visited.links, a:hover.links, a:active.links {
    font: bold 14pt Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    }
    a:link.links {
    color: #5F7383;
    }
    a:visited.links {
    color: #FF6633;
    }
    a:hover.links {
    color: #FFFF00;
    text-decoration: underline;
    }
    a:active.links {
    color: #006A92;
    }

    </style>

    Here is the actual page:
    http://www.rebecca-davis.com/testCSS.htm

    If you see the changes there and I don't, then I guess maybe I should try reloading my IE.

IMN logo majestic logo threadwatch logo seochat tools logo