Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS class ok in ie but not firefox

    I have set the background of the current link on my web pages to change colour so the user knows which page they are on. This works fine in IE but does not work in firefox.

    Here is the html
    Code:
    <div id="navbar">
    <a href="portfolio.html" >Home</a>
    <a href="photoshop.html" class="current" >Photoshop</a>
    <a href="contactme.php">Contact</a>
    </div>
    Here is the css
    Code:
    a.current { 
    	background-color: #999; 
    	color: inherit;
    	padding-bottom: 5px;
    	padding-top: 5px; }
    I am relatively new to this so maybe it is a simple error.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.

    For example, given this style sheet:
    Code:
    .foo {
      background-color: white;
      color: black;
    }
    
    .bar {
      background-color: inherit;
      color: inherit;
      font-weight: normal;
    }
    
    And this HTML fragment:
    
    <div class="foo">
      <p class="bar">
        Hello, world. This is a very short
        paragraph!
      </p>
    </div>
    The background colour of the div element is white, because the background-color property is set to white. The background colour of the paragraph is also white, because the background colour property is set to inherit, and the background colour of the parent element (the div) is set to white.

    that may be why its not working for FF, because it will pull the existin color and not change.

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks for the reply, I removed the inherit and still have the same problem. I did think the inherit was for the text colour but even after removing the text has stayed the same colour.
    I like css and yet don't like it as well. I guess this is learning.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    how do you have the rest of your links defined?

    something like:
    Code:
    a { color: #000; }
    a:hover { color: #fff; }
    or like:
    Code:
    a:link { color: #000; }
    a:hover { color: #fff; }
    if the later try:
    Code:
    a.current:link { color: #000; }

    If you have the links like:
    Code:
    #navbar a { color: #000; }
    etc...
    then something like:
    Code:
    #navbar a.current { color: #000; }
    etc...
    It more than likely is an inheritance issue. If you could show more of the relevant code it would be easier to debug.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    simonwraight (02-21-2008)

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    40
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thankyou so much, it was an inheritance issue I think.

    Code:
    #navbar a.current
    This sorted it.


  •  

    Posting Permissions

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