IE problem with link font-color

HTML & CSS
1

http://angelorensanz.com/sculptures.html

am having problem in IE (IE6, not sure about later versions) with font-color for a link…

link “SCULPTURES” should be darker when in “Sculptures” section (same thing for “Environmental”, etc…)

why is this not being respected in IE? (IE6 at any rate…)

code:

#nav-sub a, #nav-sub a:visited { 
	text-decoration:none; 
	display:inline; margin:0 ;  
	color:#6493B5; 
	font-size:11px;  
	font-weight:bold; 
}
#nav-sub a.active, #nav-sub a:hover { 
	color:#1E4968;  
}

thank you…

2

oh man… that’s what it was, I hadn’t included “:visited” for the one with class “active”… thank you very very much everyone…

3

If I understand your problem correctly then IE6 needs a defined a visited state for a.sel.


a.sel [B],a.sel:visited[/B], a:hover {
    color:red;
}

Otherwise it takes the a:link visited colour.

4

Simple use a.visited:hover{color:#ffff00;}
It really works.
by baagdi

5

The problem is that for me its working (IE8) and I don’t have a machine with 6 to test it. The way I see your testpage SCULPTURES has .class sel and appears like that. When I hover over the other three they are working as well. The same with the two test links below that. Did you try it on another computer?

6

You haven’t posted any CSS that tests for either class=“selected” or class=“active” on the <a> tags. All of the CSS you posted applies to all <a> tags within the id=“nav-sub”.

You should probably avoid using active as a class name as it will be easy to confuse it with the active pseudo-class that applies when the mouse button is held down with the mouse cursor on the link or where the link has the focus and the enter key is depressed.

It is also a good idea to avoid using selected as a class as well as that may get confused with the HTML selected attribute.

7

oh man… I just did what you suggested…
http://angelorensanz.com/drawings-1998.html

and guess what? IE problem persists… this is truly bizarre…

thanks again…

8

here it is…
http://angelorensanz.com/sculptures-test.html

problem in IE remains… I just don’t get this… just validated CSS, it validates…

9

ok, eliminated class “active” and “selected”… used class “sel” now for the links…
http://angelorensanz.com/sculptures-test.html

IE still won’t cooperate… this is truly bizarre…

thank you…

10

class “active” is being applied to a link,

<li><a class="active" href="sculptures.html">SCULPTURES</a></li>

class “selected” is being applied to an <li>…

<li class="selected">DRAWINGS AND PAINTINGS</li>
11

here is a bare-bones…
http://angelorensanz.com/sculptures-test.html

no class “selected” being applied anywhere… font-color for link in IE persists…

thank you for your help…

12

So what happen if you change

<li class="selected">DRAWINGS AND PAINTINGS</li>

to

<li><a class="active" href="drawings-1998.html">DRAWINGS AND PAINTINGS</a></li>

After all that how the active links are declared for the SCULPTURES and INSTALLATIONS as well. I know that you are rebuilding the site someone else made but I don’t see a reason why on two pages the active link is declared on the <LI> and on two other pages on the <A . Is there a reason for this, Im just curious

13

I’m using “active” for the links, “selected” for active <li>'s…

I know this might not be 100% kosher, this is a site I rebuilt, and this is how they had it, and not sure what other options there are… if you are in “sculptures” I still want you to be able to link to “sculptures” main page, but make it “active” anyway to denote you’re in “sculptures” section… for “drawings and paintings” didn’t feel this was necessary as it’s only two pages…

either way… why is “active” class for links not working in IE???

thank you…

(why is this textarea so small… could they make it bigger please…)

14

In IE 8 it working but when I look at your sculptures page I see:

<li><a class="active" href="sculptures.html">SCULPTURES</a></li>

but then when I look at your drawings page I see:

<li class="selected">DRAWINGS AND PAINTINGS</li>

but I don’t see the class selected in the styles you showed? Shouldn’t that be active as well?

15

maya90 I know things like this can drive you insane. What I normally do In such casses is to leave the project for what it is and make a test page, sometimes things are confusing when working in the website environment. It can be another rule that is overwriting the .active rule. Just make a test page with just those two css rules.

<style type="text/css">
#nav-sub a, #nav-sub a:visited { 
	text-decoration:none; 
	display:inline; margin:0 ;  
	color:#6493B5; 
	font-size:11px;  
	font-weight:bold; 
}
#nav-sub a.active, #nav-sub a:hover { 
	color:#1E4968;  
}
</style>

Then make two links one with the active class and one without!


<a class="active" href="#">test1</a><br>
<a href="#">test2</a>

And see what happens? If it’s working then it means that in your original stylesheet something is overwriting the .active rule

16

That’s not what I’m saying! When you go to sculptures.html and installations.html the class you use for the active link is called active. On the other hand when you go to drawings-1998.html and environmental.html the class you use for the active link is called selected! First try that because I don’t know of any issues with IE6 not as you call it respect such rules