SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with ID anchor style overriding standard anchor styling

    I have a style sheet where i have specified the standard anchor tags and a specific set of anchor tags for a div see below - the problem is that the style for topnav is showing for all anchor tags within the page - even on pages where there is not even a topnav div present.

    I hope have explained this clearly enough - i can't work out why this is happening - BTW it is only happening in IE - firefox works fine

    Hope someone can help

    a{
    color: #0000FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 92%;
    line-height: 107%;
    }
    a:link {
    color: #0000FF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 92%;
    line-height: 107%;
    }
    a:visited {
    color: #9900CC;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 92%;
    line-height: 107%;
    text-decoration: underline
    }
    a:hover {
    color: #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 92%;
    line-height: 107%;
    text-decoration: underline
    }
    a:active {
    color: #FF0000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 92%;
    line-height: 107%;
    text-decoration: underline
    }

    #topnav a, a:link, a:visited, {
    font-size: 12px;
    color: #365AA8;
    text-decoration: underline;
    font-weight: bold;
    }
    #topnav a:hover, a:active {
    font-size: 12px;
    color: #365AA8;
    text-decoration: underline;
    font-weight: bold;
    background-color: #FFD5D5;
    }

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'd need to do:

    #topnav a, #topnav a:link, #topnav a:visited { etc } - you need to specify the id to have link styles apply to links just within that element.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Aside what he said above...it's :link, :visited, :hover, :active

    You cna't go out of order.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Basically you are assigning the styles in the following order

    a
    a:link
    a:visited
    a:hover
    a:active
    #topnav a
    a:link
    a:visited
    #topnav a:hover
    a:active

    and so the later a:link, a:visited, and a:active references are always overriding the earlier ones.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and don't forget #topnav a:focus before the hover rule!
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  6. #6
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much - i suspected it had something to do with the order they were put in - but i thought i had it covered.

    thanks again


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
  •