4 Replies Latest reply on Mar 19, 2010 2:25 AM by John Waller

    Link rule Visited misacts on other link rules - how to solve?

    Ptannee

      Hello,

       

      When I set the link class "a:visited {color:somecolor }, the other classes do not work anymore. It is, for example the Hover is working fine until I click the hyperlink, after that it gets the color I specified in the a:visited and the Hover don't work from there, nor Active etc. It is both in Firefox and IE so it's not browser problem. Please help!

        • 1. Re: Link rule Visited misacts on other link rules - how to solve?
          John Waller Adobe Community Professional & MVP

          Can't help without a link so we can see your code, I'm afraid.

          • 2. Re: Link rule Visited misacts on other link rules - how to solve?
            Ptannee Level 1

            This is as simple as it can be, code of myname.css

             

            @charset "utf-8";
            /* CSS Document */

             

            a:link {color: #000}
            a:hover {color: #FF0}
            a:active {color: #FF0}
            a:visited {color: #000}

             

            the page code the rule misacts:

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Untitled Document</title>
            <style type="text/css">
            <!--
            body,td,th {
                color: #F00;
            }
            body {
                background-color: #000;
            }
            .indexTable {
            }
            .indexTable {
                background-color: #000;
                background-image: url(gfx-index.jpg);
            }
            .index.Link {
                font-family: Times New Roman, Times, serif;
            }
            .index.Link {
                font-family: "Times New Roman", Times, serif;
                font-size: 24px;
                font-style: italic;
                font-weight: bold;
                color: #000;
            }
            .indexLink {
                font-family: "Times New Roman", Times, serif;
                font-size: 36px;
                color: #000;
                font-style: italic;
                font-weight: bold;
            }
            .indexTextStrona {
                font-family: "Times New Roman", Times, serif;
                font-size: 36px;
                font-style: italic;
                color: #F00;
                text-align: right;
            }
            .indexTextAaviolasa {
                font-size: 50px;
                font-family: "Times New Roman", Times, serif;
                font-style: italic;
                color: #F00;
                text-align: right;
            }
            -->
            </style>
            <link href="css.css" rel="stylesheet" type="text/css" />
            </head>

             

            <body>

             

            <table width="800" border="0" align="center" class="indexTable">
              <tr>
                <td width="348" height="62"> </td>
                <td width="223" class="indexLink"> </td>
                <td width="215" class="indexLink"><a href="wiersze.htm">Wiersze</a></td>
              </tr>
              <tr>
                <td height="62"> </td>
                <td> </td>
                <td class="indexLink"><a href="obrazy.htm">Obrazy</a></td>
              </tr>
              <tr>
                <td height="62"> </td>
                <td> </td>
                <td class="indexLink"><a href="grafiki.htm">Grafiki</a></td>
              </tr>
              <tr>
                <td height="62"> </td>
                <td> </td>
                <td class="indexLink"><span class="indexLink"><a href="rekodzielo.htm">Rękodzieło</a></span></td>
              </tr>
              <tr>
                <td height="152" valign="bottom" class="indexTextStrona">strona</td>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td height="97" valign="top" class="indexTextAaviolasa">Aaviolasa</td>
                <td> </td>
                <td> </td>
              </tr>
              <tr>
                <td height="66"> </td>
                <td> </td>
                <td> </td>
              </tr>
            </table>
            </body>
            </html>

            • 3. Re: Link rule Visited misacts on other link rules - how to solve?
              Mylenium Most Valuable Participant

              And your problem specifically? This is intended behavior - the link has been visited, so it correctly gets assigned this state. I really don't see why you think it is incorrect. Only flushing the history of your browser will make it hover again or the use of JavaScript insrtead of direct links...

               

              Mylenium

              • 4. Re: Link rule Visited misacts on other link rules - how to solve?
                John Waller Adobe Community Professional & MVP

                Your  problem is that your CSS rules for your links are specified in the wrong order.

                 

                Use L - V - H - A

                 

                Change:

                 

                a:link {color: #000}
                a:hover {color: #FF0}
                a:active {color: #FF0}
                a:visited {color: #000}

                 

                to

                 

                a:link {color: #000}
                a:visited {color: #000}

                a:hover {color: #FF0}
                a:active {color: #FF0}

                 

                Since your colors are the same for the L-V pair and the H-A pair, this can be shortened to:

                 

                a:link, a:visited {color: #000}
                a:hover, a:active {color: #FF0}