SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    visited link settings messing up my menu

    Howdy all,

    I'm trying to setup some CSS buttons so that the bgcolor changes when the user tabs over them. I've already setup the mouseover effects and that works fine.

    If a link has been visited, then my "active" settings will no longer work when i tab through my menu. I tried getting rid of the visited piece altogether, but the menu looks really messed up then.

    How do i get the a:visited to mimic my a:link, but still allow my a:active to have priority?

    Here's a screenshot of the menu:

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Make sure you order looks like the following:

    Code:
    a:link { }
    a:visited { }
    a:hover { }
    a:active { }

  3. #3
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by polvero
    Hi,
    Make sure you order looks like the following:

    Code:
    a:link { }
    a:visited { }
    a:hover { }
    a:active { }
    still didnt work :(

    Here's my block of code from the CSS file (most of this is from a sitepoint article anyway, i just modified it to make borders around each piece)
    HTML Code:
    a.vertical:link
      {
      text-decoration:none;
      color:#000000;
      background:#8CA2D6;
      border-style:solid;
      border-color: #181C18;
      border-width:2px;
      font-weight: bold;
      width: 150px;
      }
    
    
    
    a.vertical:visited
      {
      text-decoration:none;
      color:#000000;
      background:#8CA2D6;
      border-style:solid;
      border-color: #181C18;
      border-width:2px;
      font-weight:bold;
      width: 150px;
      }
    
    a.vertical:hover
      {
      text-decoration:none;
      color:black;
      #background:#FFD600;
      border-style:solid;
      border-color: #181C18;
      border-width:2px;
      font-weight:bold;
      width: 150px;
      }
    
      a.vertical:active
      {
      text-decoration:none;
      color:black;
      #background:#8CA2D6;
      background:#FDD600;
      border-style:solid;
      border-color: #181C18;
      border-width:2px;
      font-weight:bold;
      width: 150px;
      }
    
    .verticalBorder
      {
      background:#181C18;
      border-style:solid;
      border-color: #181C18;
      border-width:2px;
      width:154px;
      }
    And here's how i use it:
    PHP Code:
    echo '<div class="verticalBorder" align="center">';
    echo 
    '<a href="index.php" class="vertical" title="Home Page">Home</a><br>';
    echo 
    '<a href="how.php" class="vertical" title="Learn how to use the service">How to Use</a><br>';
    echo 
    '<a href="how.php" class="vertical">Some test link</a><br />';
    echo 
    '</div>'

  4. #4
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually that fixed it. I just had to clear my cache,
    thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •