6 Replies Latest reply on Jan 30, 2010 3:02 PM by John Waller

    Rollover text links won't work

    M_G6 Level 2

      Can anyone tell me what's wrong with this code? My rollover text links do not work in Safari or Firefox. The COMPANY INFO link should turn blue and underline when a mouse is placed on it. But alas, it does not. Thanks for looking.

       

      Here's the code, don't worry about missing images:

       

       

      <!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>AeroArc, Inc.</title>
      <style type="text/css">

       

      body {
      font:Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      text-align: center;
      }

       

      .header {
          width: 900px;
          height: 85px;
          margin: 0 auto;
      }

       

      .menubacker {
          width: 100%;
          height: 35px;
          margin: 0 auto;
          text-align: left;
          background-image: url(images/menutile.jpg);
          border-top: 1px solid #CCCCCC;
          }
         
         
      .menu {
          width: 900px;
          height: 25px;
          margin: 0 auto;
          font-size: 70%;
          color: #666666;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          text-align: left;
          background-image: url(images/menutile.jpg);
          font-weight: bold;
          padding-top: 10px;
          }
         
         
      .main {
          width: 100%;
          height: 300px;
          margin: 0 auto;
          background-color: #003366;
          border-top: 1px solid #999999;
          }
         
         
      .splashbox1 {
          width: 900px;
          height: 300px;
          margin: 0 auto;
          }
         
         
      .contentbox1 {
          width: 900px;
          height: 400px;
          margin: 0 auto;
          }
         
      .footer {
          width: 100%;
          height: 300px;
          margin: 0 auto;
          background-color: #CCCCCC;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 80%;
          color: #FFFFFF;
          }
         
      .logobox1 {
          width: 500px;
      height: 130px:
      ;             text-align: left;
          padding-top: 15px;
      }

       


      a:hover {
          color: #003399;
          text-decoration: underline;
      }
      a:link {
          color: #666666;
          text-decoration: none;
      }
      a:visited {
          text-decoration: none;
          color: #666666;
      }
      a:active {
          text-decoration: none;
          color: #003399;
      }
      </style>
      </head>

       

      <body>

       

      <div class="header">
      <div class="logobox1"><img src="images/aeroarc_logo_160.jpg" width="160" height="56" /></div>
      </div>
      <div class="menubacker">

       


      <div class="menu">Home | <a href="index.html">Company Info</a> | Capabilities | Certs &amp; Approvals | FAA/PMA | Site Map | Contact Us</div>

       


      </div>
      <div class="main">

       

      <div class="splashbox1">Splashbox</div>

       


      This is Main.</div>

       


      <div class="contentbox1">Content Box</div>

       


      <div class="footer">This is the Footer.</div>

       


      </body>
      </html>

        • 1. Re: Rollover text links won't work
          martcol Level 4

          I think it's because your pseudo classes have to be in a particular order which is LoVe HAte.

           

          Live

          Visited

          Hover

          Active

           

          Yours is

           

          H

          L

          V

          A

           

          That's going to throw the world of its axis!

           

          This is in your sample above.  It needs a bit of a tidy up!

             
          .logobox1 {
              width: 500px;
          height: 130px:
          ;             text-align: left;
              padding-top: 15px;
          }

           

          martin

          • 2. Re: Rollover text links won't work
            M.R.Biesheuvel Level 3

            a:hover {
                color: #003399;
                text-decoration: underline;
            }
            a:link {
                color: #666666;
                text-decoration: none;
            }
            a:visited {
                text-decoration: none;
                color: #666666;
            }
            a:active {
                text-decoration: none;
                color: #003399;
            }


            Using the love hate rule makes editing links much easier and shorter, for example if you want to use this behaviour of links only in the footer you can write;

             

             

             

            #footer a, a:link {

                 color:#666666;

                 text-decoration: none;

            }

             

            #footer a:hover {

                 color:#003399;

                 text-decoration:underline;

            }

             

            #footer a:active{

                 text-decoration:none;

            }

            1 person found this helpful
            • 3. Re: Rollover text links won't work
              {sitewide}

              martcol wrote:

               

              Live

              Visited

              Hover

              Active

              I know you meant "link" vs "live"...right?

              • 4. Re: Rollover text links won't work
                M_G6 Level 2

                Martcol, yours was the solution. Very interesting (as well as somewhat disturbing) that DW generated all of the code for this page. I wonder why it did not place everything correctly? Eh, Adobe.

                 

                Many thanks to all who responded.

                • 5. Re: Rollover text links won't work
                  martcol Level 4

                  {sitewide} wrote:


                  I know you meant "link" vs "live"...right?

                   

                  Don't you just hate it when that happens!

                   

                  Just enough of an error to stop me getting cocky!

                   

                  And as for DW getting the code wrong I have to confess that I get much more wrong than it does.

                   

                  I'm glad you got it fixed.

                   

                  Martin

                  • 6. Re: Rollover text links won't work
                    John Waller Adobe Community Professional & MVP
                    function(){return A.apply(null,[this].concat($A(arguments)))}

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

                    Very interesting (as well as somewhat disturbing) that DW generated all of the code for this page. I wonder why it did not place everything correctly?


                    The simple answer is because:

                     

                    a) there's no one correct order. e.g. L-V are interchangeable as are H-A. There's also F for a:focus which seems to be rarely used.

                    http://meyerweb.com/eric/thoughts/2007/06/04/ordering-the-link-states/

                     

                    b) L-V-H-A is a CSS1 principle (last rule wins in a given scenario) necessary because each pseudo-class has identical specificity,

                     

                       A:link {color: blue;}             /* specificity = 1,1 */
                       A:active {color: red;}           /* specificity = 1,1 */
                       A:hover {color: magenta;}    /* specificity = 1,1 */
                       A:visited {color: purple;}      /* specificity = 1,1 */

                     

                    CSS2 now allows the chaining of pseudo-classes. For example, you could write:

                       A:visited:hover {color: maroon;} /* specificity = 2,1 */
                       A:link:hover {color: magenta;}   /* specificity = 2,1 */
                       A:hover:active {color: cyan;}    /* specificity = 2,1 */
                    

                     

                    They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict.

                     

                    See http://meyerweb.com/eric/css/link-specificity.html for more.

                     

                    In CS4, the CSS compound selector dropdown menu lists the normal CSS1 order of L-V-H-A by default but you can still select whichever order you wish.

                     

                    dw_lvha.png