...

View Full Version : CSS class ok in ie but not firefox



simonwraight
02-20-2008, 10:07 PM
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

<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

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.

jcdevelopment
02-20-2008, 10:18 PM
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:


.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.

simonwraight
02-20-2008, 10:39 PM
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.

harbingerOTV
02-20-2008, 11:59 PM
how do you have the rest of your links defined?

something like:


a { color: #000; }
a:hover { color: #fff; }


or like:


a:link { color: #000; }
a:hover { color: #fff; }


if the later try:


a.current:link { color: #000; }



If you have the links like:


#navbar a { color: #000; }
etc...


then something like:


#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.

simonwraight
02-21-2008, 09:16 AM
Thankyou so much, it was an inheritance issue I think.


#navbar a.current

This sorted it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum