7 Replies Latest reply on Mar 30, 2010 11:51 AM by MarkV84

    Link issue

    MarkV84

      Hi,

       

      I have changed the CSS rule on my website for my links to be black with a grey hover. However when I view my website online the links appear purple with a grey rollover - http://www.seemaidstone.co.uk

       

      Im really tearing my hair out over this, as I have checked my code but there is no purple, does any body have any suggestions please?

       

      Here is my CSS

       

      <style type="text/css">

      <!--

      body,td,th {

      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

      font-size: 12px;

      color: #000;

      line-height: 14px;

      }

      body {

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

      margin-top: 0px;

      background-attachment: fixed;

      background-color: #D8D8D8;

      background-position: center;

      color: #000;

      }

      a:link {

      color: #000000;

      text-decoration: none;

      }

      a:visited {

      text-decoration: none;

      }

      a:hover {

      text-decoration: none;

      color: #666;

      }

      a:active {

      text-decoration: none;

      }

      -->

      </style></head>

       

      Thank you

        • 1. Re: Link issue
          osgood_ Level 8

          The ones in the Green bars?

           

          If so they look Black to me and Grey when moused over, albeit I think the Green is making the Grey hover look a bit purplish, not really a good color combination Grey on Green.

          • 2. Re: Link issue
            MarkV84 Level 1

            Hi, no its the purple link in the navbar and the one underneath.

             

            Thanks

            • 3. Re: Link issue
              osgood_ Level 8

              MarkV84 wrote:

               

              Hi, no its the purple link in the navbar and the one underneath.

               

              Thanks

               

              I don't see any purple link in the top nav bar. All links are black and the first is grey when moused over.

               

              What browser are you viewing this purple link in?

              • 4. Re: Link issue
                MarkV84 Level 1

                Just checked in Firefox and as you say the links are black. However when I check in Safari they are purple, so do you know why it is not displaying correctly on Safari?

                • 5. Re: Link issue
                  osgood_ Level 8

                  MarkV84 wrote:

                   

                  Just checked in Firefox and as you say the links are black. However when I check in Safari they are purple, so do you know why it is not displaying correctly on Safari?

                   

                  Humm..I guess that is Safari on the PC platform? It looks ok in Safari on the Mac platform.

                  • 6. Re: Link issue
                    John Waller Adobe Community Professional & MVP

                    The purple link you're seeing is the default of most browsers for the visited state of a link when there's no color defined for a:visited in your stylesheet.

                     

                    Purple for visited links shows up in IE8, FF 3.6, Safari and Chrome here on Win 7.

                     

                    Change

                     

                    a:link {

                    color: #000000;

                    text-decoration: none;

                    }

                    a:visited {

                    text-decoration: none;

                    }

                    a:hover {

                    text-decoration: none;

                    color: #666;

                    }

                    a:active {

                    text-decoration: none;

                    }

                     

                    to

                     

                    a:link {

                    color: #000000;

                    text-decoration: none;

                    }

                    a:visited {

                    text-decoration: none;

                    color: #000000;

                    }

                    a:hover {

                    text-decoration: none;

                    color: #666;

                    }

                    a:active {

                    text-decoration: none;

                    }

                     

                    or shorten it all to:

                     

                    a:link, a:visited {

                    color: #000000;

                    text-decoration: none;

                    }

                    a:hover, a:active {

                    text-decoration: none;

                    color: #666;

                    }

                    • 7. Re: Link issue
                      MarkV84 Level 1

                      Thanks John, thats done the trick!