IE6 ignoring active link CSS style

Question

The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6.

.side_nav a.active 
{
    color:#FFFFFF;
    background-color:#9F1F63;
}

Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;)

Any ideas on why this is happening and how I can fix it appreciated.

The complete styling for the nav below:

.side_nav 
{
    text-align : left;
    margin-left: -10px;
}

.side_nav ul 
{
    list-style-type: none;
    list-style-position:inside;
    margin-left:0px;
}
.side_nav li 
{
    margin-top: 10px;
    display: list-item;
    list-style-type:none; 
}
.side_nav a, .side_nav a:visited
{
    text-decoration: none;
    color : #9F1F63;
    font-weight : bold;
    padding: 5px 10px 5px 10px;  
}
.side_nav a:hover 
{
    color:#B26D7F;
}
.side_nav a.active 
{
    color:#FFFFFF;
    background-color:#9F1F63;
}

EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML.

    <div class="side_nav">
        <a class="active" href="Page1.aspx">Page1</a><br />
        <a href="Page2.aspx">Page2</a><br />
        <a href="Page3.aspx">Page3</a><br />
    </div>

Answer 1

Try adding a more specific selector to .side_nav a.active such as div .side_nav a.active where div is the parent element.

The color is probably being overwritten from the .side_nav a rule.

Also, you may have a typo - are trying to use the :active selector?

Answer 2

In IE6, it matters which order you specify the anchor links. You should specify them in this order to achieve the intended result: first a:link, then a:visited, a:hover and a:active.

Answer 3

Your CSS has a period where there should be a colon, in .side_nav a.active (should be .side_nav a:active

With this fixed, it works for me in IE6.

Answer 4

I tried copying your code, and the format did work.
Your problem is you see the link as visited - you have both formatting of the visited and active (so you have the purple background and the purple text).
You should override the color for visited links with the active class:

.side_nav a.active, .side_nav a.active:visited
{
    color: #FFFFFF;
    background-color: #9F1F63;
}

Answer 5

Try to use "!important". Like this: .side_nav a.active { color: #FFFFFF !important; background-color: #9F1F63; }

Answer 6

Thanks Andrei Bacean It is working fine now.

Ajeet