CODEWITHSUNDEEP
htmlcss
Leah
Leah

Reputation: 3342

IE6 ignoring active link CSS style

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>

Upvotes: 2

Views: 5335

Answers (5)

Andrei Bacean
Andrei Bacean

Reputation:

Try to use !important. Like this:

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

Upvotes: 0

Kobi
Kobi

Reputation: 138017

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;
}

Upvotes: 3

Bennett McElwee
Bennett McElwee

Reputation: 25760

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.

Upvotes: 4

DOK
DOK

Reputation: 32841

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.

Upvotes: 5

Mark Hurd
Mark Hurd

Reputation: 13076

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?

Upvotes: 2

Related Questions