2 Replies Latest reply: Sep 11, 2013 4:35 PM by Noradc RSS

    Why is the a:visited style not working?

    Noradc Community Member

      Hello.  I have created a horizontal menu and would like the a:visited text and background colors to be the reverse of a:link.  The a:link and the a:hover work well.  But when I make the a: visited color and background color different from a:link, all of the links text turn black and the background turns white for all of them.  The links were not cicked on.  But when a link was clicked on, a thin border of the text color appears around the box surrounding the link that was clicked on.  I would appreciate knowing how to correct this.  I have included the following styling link information that is in the head and body of the the html and css documents :

       

       

      html document:                                                                                css document:

       

       

      ul {                                                                                                     .navigation {
          list-style-type: none;                                                                           width:   960px;
          text-align: right;                                                                                   height:    50px;
          padding-top: 6px;                                                                               margin-top:  50px;
          padding-bottom: 6px;                                                                         font-size: 18px;
                                                                                                                       z-index: 5     
      }                                                                                                         }

       

      li {
          display: inline;
                 
      }
      a:link {
          color:#FFF;
          text-decoration: none;
          background-color:#000;
          text-align: center;
         
          padding: 0px;
      }

       


      a:visited {
          text-decoration: none;
          color: #000;
          background-color: #FFF;
      }

       

      a:hover {
          text-decoration: none;
          color:#000;
          background-color:#FFF;
      }

       

      a:active {
          text-decoration: none;
          color: #FFFFFF;
          background-color: #000;

      }

       

      </head>

       

      <body>                   

      <div class="navigation">
          <ul>
              <li><a href="index.html" target="_self">HOME</a></li>
              <li><a href="digital.html" target="_self">DIGITAL</a></li>
              <li><a href="drawing.html" target="_self">DRAWING</a></li>
              <li><a href="painting.html" target="_self">PAINTING</a></li>
              <li><a href="about.html" target="_self">ABOUT</a></li></ul>
      </div>

       

      </body>

       

       

       

      Thank you.