1 Reply Latest reply on May 4, 2010 5:06 AM by John Waller

    CSS text link a:visited behaviour problem

    Christo70 Level 1

      Here's the site: www.bikramyogafitzroy.com.au

       

      I am using CS3 with lots of manual coding intervention.

       

      I have various CCS link properties applied to the text in the site with the intention that text links will display as a color with a dotted underline, onmouseover will display as a different colour with a dotted underline, visited links will display as slightly greyed out, with a dotted underline.

       

      Two things are occurring:

      • Once the text link has been visited, the a:visited property remains static, and the a:hover property no longer works onmouseover.

      • If I set the CCS styles to anything other than the formula as below the text links default back to the default browser settings after a link has been visited.

       

      This is what I would like to happen:

      Text links are coloured with a dotted underline, onmouseover the text links change to a brighter colour and with a dotted underline. No a visited property, just have the text go back to its a: link and a:hover property without the browser applying its default visited property to visited text links.

       

      Here is an example of my CSS properties formula for the main text (bodycopy):

       

      .bodycopy {

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

      font-size: 14px;

      color: #333333;

      line-height: 26px;

      }

      .bodycopy a:link {

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

      font-size: 14px;

      color: #448ccb;

      line-height: 26px;

      border-bottom: 1px dotted;

      }

      .bodycopy a:hover {

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

      font-size: 14px;

      color: #3333FF;

      line-height: 26px;

      border-bottom: 1px dotted;

      }

      .bodycopy a:visited {

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

      font-size: 14px;

      color: #999999;

      line-height: 26px;

      border-bottom: 1px dotted;

      }

       

      Hope my question makes sense.

      Christo

        • 1. Re: CSS text link a:visited behaviour problem
          John Waller Adobe Community Professional & MVP

          Put your link styles in the following order:

           

          Link

          Visited

          Hover

          Active (optional)

           

           

          function(){return A.apply(null,[this].concat($A(arguments)))}

          function(){return A.apply(null,[this].concat($A(arguments)))}function(){return A.apply(null,[this].concat($A(arguments)))}

          No a visited property, just have the text go back to its a: link and a:hover property without the browser applying its default visited property to visited text links.

          That's not possible. a:link really means a:unvisited. Once clicked, the site is in browser history so the link's default state will always be a:visited until the browser history is cleared.

           

          The a:visited state is an important navigation tool for your visitors so making it unique in appearance is preferred.

           

          The cycle in which link states occur is

           

          a:link

           

          a:visited

          a:hover

          a:active

           

          a:visited

          a:hover

          a:active

           

          a:visited

          a:hover

          a:active