HTML Element's color is wrong

element.style {
    float: left;
    font-weight: bold;
    margin-right: 8px;
}
a:link {
    text-decoration: none;
}
front_layout.css (line 21)
Inherited from div#header
#header {
    color: #FFFFFF;
}
front_layout.css (line 542)
Inherited from body
body {
    font: 75%/160% Arial,Helvetica,sans-serif;
}

These are all the styles showed from firebug for this element.

This element's color is constantly something else, instead of white (visual and in computed part of firebug).

Why is this? What's overriding it's inherited value from #div header?

Edit: the element is a link. <a float: left; font-weight: bold; margin-right: 8px" href="">About开发者_C百科 Us</a>

It's the default color for a link you are seeing. Add

#header a {
    color: #ffffff;
}

and your link will be white.

The color from the container div #header will not be applied to the containing a tag. You have to specify it explicitly.

So the property color refers to the font color. background-color refers to the background color. Not sure if you were confusing those.

If it's font color related try adding !important after the color property and see if that overrides it. If so then it's likely a cascading issue and you need to see what other elements are being set. Do you have a:link { color:red; } somewhere that is causing issues. This can also happen if you have a bad closing tag.