making links and visited links keep their original color

working in Firefox but not IE

[HelenDev]

#leftpanel a{
text-decoration:none;
color:inherit;
}
#leftpanel a:visited{
color:inherit;
}
#leftpanel a:hover{
text-decoration:underline;
color:inherit;
}

What am I doing wrong? Do I need to use a hack for ie?

[zackattack]

Hi - does this work..?

#leftpanel a{
text-decoration:none;
color:#06c; /*whatever colour is */
}
#leftpanel a:hover{
text-decoration:underline;
}

Not 100% sure what you are trying to do - if you are saying you want links and visited states to be the same I usually state the exact colour and use div name and then just simply 'a' this always seems to work for me in ie and FF

ZA

[HelenDev]

Not 100% sure what you are trying to do

I have a list of links which are all going to be different colors e.g.

<div id="leftpanel">
<ul>
<li style="color:#000;"><a href="http://www.test.com">WORKSHOPS</a></li>
<li style="color:#94B242;"><a href="http://www.test.com">EXHIBITIONS</a></li>
</ul>
</div>

and I have the aforementioned styles in my css.

Basically I want the links to remain the color determined in the list, whether they are visited or not.

IE is coloring the links blue, and visited ones purple, as is default behaviour. Firefox is displaying what I want, the links are black and green respectively, even when visited.

Can I make IE do this too? Am I approaching this right or am I in a right muddle?!

[Span]

<li style="color:#000;"><a href="http://www.test.com">WORKSHOPS</a></li>

That is only supposed to color text black, not the link. FF is wrong here. If you want a black colored link you have to put the style in the <a> tag.

[zackattack]

Hi

this is how I would approach it, and I know this works both in IE and in FF:

<div id="leftpanel">
<ul>
<li id="n-workshops"><a href="http://www.test.com">WORKSHOPS</a></li>
<li id="n-exhibtions"><a href="http://www.test.com">EXHIBITIONS</a></li>
</ul>
</div>

<style>
#n-workshops a {
color: #000;
}
#n-exhibtions a {
color: #94B242;
}
#n-workshops a:hover, #n-exhibtions a:hover {
text-decoration: none;
}
</style>

But this may not be what you are looking for..

Za

[HelenDev]

Aha!

Thanks Span! That was exactly it!

A Friday afternoon moment on my part as well.

*blushes*

[Hester]

Be aware that styling "a" also styles anchors on the page. The preferred format to use is ":link".

[zackattack]

Hi Hester

RE: 'a'

Only when you dont have a specified id. Obviously if it were just..

a {
color: #f03;
}

then yes it will make all links on the page the same - at least this has been my experience so far :-)

Za