links inheriting color in IE 1

johnallan · Jan 26, 2006

I have this a the top of my css file

a {
color: inherit;
text-decoration: none;

}

In firefox this means I dont have to define a color for each instance of <a> (to avoid 'link purple') it will inherit the color from the surrounding div or p tag. But it does not work in IE all the links, unless otherwise specified, are purple. The underline part works fine.

Any ideas?

BillyRayPreachersSon · Jan 26, 2006

Well - reading around, it looks like many people have had this problem for a long time, and I've not found any reference to any solution.

However, not being the type of chap who gives up easily, I've crafted my own solution for you. This seems to work a treat:

Code:

<html>
<head>
	<style type="text/css">
		div#div1 {
			color: red;
		}
		div#div2 {
			color: green;
		}
		a, a:link, a:visited, a:hover, a:active {
			color: inherit;
			_color: expression(parentNode.currentStyle.color);
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div id="div1">
		<a href="url1.html">URL 1</a>
	</div>
	<div id="div2">
		<a href="url2.html">URL 2</a>
	</div>
</body>
</html>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

johnallan · Jan 26, 2006

Thanks that is great. Is that CSS? Never see anything like it before. This one is going in the books.. thanks.

ca8msm · Jan 26, 2006

Yes it is CSS (well the expression part is IE only).

The way it works is that most browsers are capable of applying the "color: inherit" section that you want and therefore do so. When they get to the "expression" bit, they don't understand it and simply ignore it. IE does the complete opposite and therefore you should end up with a solution that work's in most browsers.

I've just had to use the "expression" workaround due to the lack of support for the max-width property and followed this article which gives you a nice, simple explanation:

http://www.svendtofte.com/code/max_width_in_ie/

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

BabyJeffy · Jan 27, 2006

Dan has used the underscore hack to "hide" the expression code from non-IE browsers. So strictly speaking as soon as the browser sees the underscore it skips to the next rule (using the ; as a delimiter) - rather than exposing the expression and ignoring that.

It's a moot point anyway [smile]

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

travisbrown · Jan 28, 2006

I guess this would throw a parse error in the validator, like most hacks.

Is the only other solution to explicitly declare an a:visited value for each class and ID? This kind of belies the purpose of cascading.

Cool solution, btw.

BillyRayPreachersSon · Jan 28, 2006

This solution can easily be achieved without validation errors using IE-only conditional comments. However, as validation was not a requirement disucssed by the OP, I decided not to complicate the post any more than necessary.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

links inheriting color in IE 1

johnallan

Programmer

BillyRayPreachersSon

Programmer

johnallan

Programmer

ca8msm

Programmer

BabyJeffy

Programmer

travisbrown

Technical User

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor