Stopping CSS Inheritance

Discussion in 'CSS' started by pipes, May 6, 2008.

0
  1. #1
    I have a problem with CSS Inheritance where the styling is passing through into something else because of the way a .tpl file is included within another .tpl file in a website of mine.

    It seems to pass the styling from navigation to the next .tpl file and attaches navigation to a couple of banners, but i have no idea how to stop it, any suggestions?
     
    pipes, May 6, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, it depends on what you have (originally). But let's say you had
    a {
    text-decoration: underline;
    color: #f00; (red)
    }

    a:hover {
    color: #fff; (white)
    font-weight: bold;
    }

    and then your other menu is supposed to be totally different. So, give than menu a name (either class or id, I usually give them id's):

    next nav:
    <ul id="choicenav"> (or whatever)
    etc...
    </ul>

    Then in CSS you can override the cascade by referring to the id (if you couldn't add an id or a class, then you can always mention the parent).

    #choicenav a {
    text-decoration: none;
    color: #000; (black)
    }
    #choicenav a:hover, #choicenav a:focus {
    color: #f00;
    font-weight: normal; (overrides bold, you need to do this specifically)
    }

    That's one example, there are several ways to do it.
     
    Stomme poes, May 6, 2008 IP
  3. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #3
    Thanks Stomme poes, im going to have to look at it fully again probably tomorrow and go through it slowly, thanks for the suggestion, il have a go at this, its early days for me and CSS yet so still quite a learning curve but hopefully il get there.
     
    pipes, May 6, 2008 IP