views:

434

answers:

7

Here is my code: css part

.blue {
    color:#6E99E1;
    font-size:9px;
}

markup part

<span class="blue">::<a href="/equipment_new.php">CLICK HERE</a>:: to view our New Equipment inventory. <br /><br /></span>

I've somehow triggered something that prevented "a" tag from inheriting color of parent tag(here "span") now.

+3  A: 

Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.

(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)

Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)

RichieHindle
If <a> is somehow overriding your blue class, you can also just change your declaration to .blue, .blue a {...
Jeff Wain
+1  A: 

In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.

annakata
+4  A: 

I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change

.blue { color:#6E99E1; font-size:9px; }

to

.blue, .blue a{ color:#6E99E1; font-size:9px; }

Nico Burns
Beat me by one second! Removed my answer.
ScottE
+5  A: 

By default an anchor tag does not inherit attributes like color if an href attribute is present.

Check out the difference between these two on a page (i don't how to get it to display on the post):

<span style=color:green><a href="t">test</a></span>


<span style=color:green><a>test</a></span>

The following link is to the w3 c:

http://www.w3.org/TR/html401/struct/links.html#h-12.2

User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.

.....

Usually, the contents of A are not rendered in any special way when A defines an anchor only.

Kevin
Do you have any reference for the point that "By default an anchor tag does not inherit attributes like color if an href attribute is present. "?
Shore
try it; if an anchor tag doesn't have a href attribute, it doesn't act like an anchor tag.
Kevin
Yes,but I hope some reference link will make it clear if that's standard and why it's so.
Shore
I just added links to the w3c and it's explanation as to how anchor tags are rendered when not linking to another reference.
Kevin
In step further,is there any rule for judging whether a certain attribute will be inherited or not?
Shore
yes, although that gets a little tricky. I would refer to the W3c as to what is supposed to inherit to what. It depends on what type of tags they are and what css elements.
Kevin
A: 

You need to explicitly set the color of the links to override the default blue color.

miguelSantirso
+3  A: 

Just an addenda to the other responses, if you want your <a> tags to inherit the colour from their parent you can use

a {color: inherit; }
David Thomas
+1  A: 

I was going to post this as a comment, but it was getting a bit lenghty... So this is an answer to the question as well as a reply to Kevin's answer and its comments.

Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).

In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.

I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).

To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.

So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:

.blue a:link {
    color: inherit;
}

You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.

However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.

mercator