Skip navigation
skronwith
Currently Being Moderated

link colors always blue no matter what I put in

Aug 1, 2012 7:00 PM

Here is the css file, the only one I'm using for the web site I'm developing in Dreamweaver CS3:

 

@charset UTF-8;

 

 

a {

          font-family: Times New Roman, Times, serif;

          font-weight: bold;

          font-size: 18px;

}

 

 

a:link {

          color: #000000;

          text-decoration: none;

}

 

 

 

 

a:visited {

          color: #3300FF;

          text-decoration: none;

}

a:hover {

          color: #FF0000;

          text-decoration: none;

}

a:active {

          color: #FF0000;

          text-decoration: none;

}

 

 

 

 

 

 

 

 

body {

          background-image: url(images/babies.jpg);

          background-repeat: repeat;

}

p {

          font-family: Times New Roman, Times, serif;

          font-size: 18px;

          font-style: normal;

 

}

 

 

#navbar p {

background-color: #FFFF00;

 

 

          

 

 

#title {

          font-family: Geneva, Arial, Helvetica, sans-serif;

          font-size: 24px;

          font-weight: bold;

          background-color: #FFFFFF;

          border-top-style: double;

          border-right-style: double;

          border-bottom-style: double;

          border-left-style: double;

          text-align: center;

          letter-spacing: 22px;

}

h1 {

          font-size: 40px;

          font-family: Arial, Helvetica, sans-serif;

          background-color: #FADDFF;

          color: #000000;

          border-top-style: groove;

          border-right-style: groove;

          border-bottom-style: groove;

          border-left-style: groove;

          border-top-width: thick;

          border-right-width: thick;

          border-bottom-width: thick;

          border-left-width: thick;

          font-variant: normal;

          text-transform: uppercase;

          font-style: normal;

 

 

 

 

#background {

          background-image: url(/babies.jpg);

          background-repeat: repeat;

          height: auto;

          width: auto;

}

#navbar {

          border: thin none #000000;

          padding: 0px;

          margin: 0px;

 

You can see the link, visited, hover and active instructions.  However, in my web site the linked references, such as

 

<a href="../contactus.html"> CONTACT US </a>

 

it  always show up as blue.  The hover works, when I hover it turns red, but it starts as blue and after I click it to be the active link, it remains blue instead of changing to the active red color, the same as the one used for hover.  In fact, no matter where I put a link in my site, it's blue, not black.  In the designer view, the linked text shows as black, but as soon as I go to the browser (either Safari or IE), it's blue.  Any ideas?  Thanks

 
Replies
  • Currently Being Moderated
    Aug 1, 2012 8:13 PM   in reply to skronwith

    it  always show up as blue.  The hover works, when I hover it turns red, but it starts as blue and after I click it to be the active link, it remains blue instead of changing to the active red color, the same as the one used for hover.  In fact, no matter where I put a link in my site, it's blue, not black.  In the designer view, the linked text shows as black, but as soon as I go to the browser (either Safari or IE), it's blue.  Any ideas?  Thanks

     

    the blue color signifies that the link has already been visited.  The color:  #3300ff; is blue and it is shown in a:visited.  I suggest change it to:

     

    color: green;

     

    And all your links will be shown to green.

     

    To clear this, you need to clear the cache of your browser.

     

    You also need to correct the fonts to show like this:

     

    font-family : "Times New Roman", Times, serif;

     

    Notice there is a speech marks around Times New Roman and the reason is if you want this to be treated as one work#d then you must enclose it around the quotation marks.

     

    Hope this helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 8:53 PM   in reply to skronwith

    skronwith wrote:

     

    Now I'm really confused.  I reset Safari, then cleared the cache.  Then went and changed the Times New Roman as you suggested and changed the visited link color to green.  Now when I run it, the virgin links come up as green, as if they were visited, but they're not.  They should be black, as prescribed in  a:link.  Why not?

     

    I just recreated the page using this code and it works OK in IE9 and FF14:

     

     

    body {

    background-image : url(images/babies.jpg);

    background-repeat : repeat;

    }

    a {

    font-family : "Times New Roman", Times, serif;

    font-weight : bold;

    font-size : 18px;

    }

    a:link {

    color : aqua;

    }

    a:visited {

    color: darkorange;

    }

     

    a:active {

    color : crimson;

    }

    a:hover {

    color : chartreuse;

    }

     

    p {

    font-family : "Times New Roman", Times, serif;

    font-size : 18px;

    font-style : normal;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 8:56 PM   in reply to skronwith

    skronwith wrote:

     

    Actually, I got it to work by not only clearing the cache and resetting Safari, but closing it entirely and then restarting.  Now it all works.  Thank very much.

     

    Closing the browser is one way but another method is to refresh the tabs.  I don't use Safari so I don't know how you refresh the page but in FF it is a question of Right-click on the tab and "Reload Tab"

     

    OK so this is now resolved and you can move to the next assignment.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 4:44 AM   in reply to skronwith

    Most people misunderstand what the :active state means.  It is only intended to be shown when you click and hold the button down.  As soon as you release the button the link will become :visited.  Some browsers don't even bother to show it.  The active state is NOT a persistent state, i.e., it's not what is shown when the linked page is currently being shown - which is how many interpret it, including you in your previous post.

     

    To make your link behave the way you describe, you will have you use a bit more complex CSS trickery, as shown here -

     

    http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points