SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE applying global pseudoclasses to all links...

    For some reason, IE is applying my general link colors to ALL links on the page. These global pseudoclass colors are being applied to all links, even ones that have their own style specified in their appropriate classes. The colors look fine in Firefox, of course, but IE just doesn't seem to be getting it. Any ideas on what could be causing this?

  2. #2
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erm... got a link?

  3. #3
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did you define the global link styles later in your stylesheet than the custom styles?

  4. #4
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, global link styles are defined right after the body declarations and before everything else. The page can be found here, and the two stylesheets attached are here and here. The files are heavily commented so you shouldn't have trouble finding your way around. The global link styles are defined in the first stylesheet, master.css. Thanks for your help, guys!
    Last edited by HardDriver; Nov 3, 2005 at 08:41.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    well you more or less anwer your own question
    a:link {color: green;}
    a:visited {color: orange;}
    a:hover{color: brown;}
    a:active{color: pink;}

    this is not the best way to do it , this hase power on all the links,

    .header a:link, .nav a:link, .content a:link{color: green;}

  6. #6
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I've always been under the impression that is the best way to define global link colors, UNLESS their colors are defined for their particular class or id (at that point they override the global style). Also, if that's not the proper way to define global link colors, why does Firefox render them correctly?

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    your links are all the same<a href="#"> so they very easily get the orange color of visited links

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie gives more weight to a:link, a:hover etc than it does to .test a{}.

    If you precede your styles with a path that has an id, then it will add weight and the links will all work as expected.
    Code:
    #middle .navbox a {
     color: #FFF;
     background: none;
     font: bold .7em;
     font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
     text-decoration: none;
     margin: 0;
     padding-left: 3px;
    }
    #middle .navboxList a {
     font: bold .9em verdana, trebuchet ms, verdana, sans-serif;
     color: #000 ;
     text-decoration: none;
     padding-left: 15px;
     margin-left: 10px;
     background:  url(http://www.gtplanet.net/sandbox/subdreamer/i/arrows.gif) no-repeat;
     background-position: 0 -44px;
    }
    #middle .navboxList ul {
     list-style: none;
     padding: 3px;
     margin: 0;
     background: #F2F3ED;
     background-position: -351px 0;
    }
    #middle .navboxList li a {
     font: .85em tahoma, trebuchet ms, verdana, sans-serif;
     color: #003366 ;
     text-decoration: none;
     padding-left: 16px;
     margin-left: 23px;
     background:  url(http://www.gtplanet.net/sandbox/subdreamer/i/arrows.gif) no-repeat;
    }
    #middle .navboxList li a:hover {
     color: red;
     text-decoration: underline;
     background-position: 0 -21px;
    }
    #middle .navboxList div.navboxList {
     padding-top: 10px;
    }
    or alternatively re-define the states specifically .
    Code:
    .navboxList a:link,.navboxList a:visited,.navboxList a:hover,.navboxList a:active {
     font: bold .9em verdana, trebuchet ms, verdana, sans-serif;
     color: #000 ;
     text-decoration: none;
     padding-left: 15px;
     margin-left: 10px;
     background:  url(http://www.gtplanet.net/sandbox/subdreamer/i/arrows.gif) no-repeat;
     background-position: 0 -44px;
    }
     
    etc..........
    But the first example is less code

  9. #9
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant, Paul! I see why you are an advisor! Thanks so much for your help.

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    never set global css


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
  •