SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Places
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Messed up links! Please help!

    Okay, so I have this site, Just a Boy (http://www.justaboy.equiangular.net), and I put all the style into the CSS. And everything works fine. Except for the links!

    The main links work great, but I have one div layer where I need to make the links a different color or else they blend in with the background too much. So I made a separate class for it and put class="menu" into the div tag.

    HOWEVER, it didn't work! In IE, the a:link, a:active, and a:visited works but the a: hover comes out a different color than what I put (it comes out the color of the main links). In Mozilla, a:link, a:active, and a:visited work, but a:hover just doesn't work at all.

    It's like wires got crossed or something.

    This is the CSS coding for the main links:

    A:link
    { text-decoration: none; color:#567F93; font-weight: bold; }
    A:visited
    { text-decoration: none; color:#567F93; font-weight: bold; }
    A:active
    { text-decoration: none; color:#567F93; font-weight: bold; }
    A:hover
    { text-decoration: none; color:#8DBDC5; font-weight: bold; }

    Those work fine where they're supposed to.

    And this is the class I made:

    .menu a,
    .links a:link { text-decoration: none; color:#D5E5F5; font-weight: bold; },
    .links a:visited { text-decoration: none; color:#D5E5F5; font-weight: bold; },
    .links a:active { text-decoration: none; color:#D5E5F5; font-weight: bold; },
    .links a:hover { text-decoration: none; color:#567F93; font-weight: bold; },

    Obviously, #567F93 does not equal #8DBDC5!

    I also have a separate small class on one link that looks like this:

    .contactlink {margin-right: 5px !important; margin-right: 0px;}

    Could that be messing it up?

    If anybody knows anything about this, please help.

    equang

  2. #2
    SitePoint Member
    Join Date
    Jun 2004
    Location
    South Bend, IN
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's how I redefined it, and it seems to work A-Okay:

    a:link, a:visited, a:active
    { text-decoration: none; color:#567F93; font-weight: bold; }
    a:hover
    { text-decoration: none; color:#8DBDC5; font-weight: bold; }

    .menu a:link, a:visited, a:active { text-decoration: none; color:#D5E5F5; font-weight: bold; }
    .menu a:hover { text-decoration: none; color:#567F93; font-weight: bold; }


    That displays fine in Mozilla standard Firefox. Looks like it didn't like the way you were gangings things. Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Places
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay that makes the menu work great in both browsers! Thanks!

    However now the table links are messed

    Any ideas?


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
  •