Stupid link color problem

[riptide]

I've changed link colors before but this is driving my crazy. I can't change the a:link color. a:visited is overriding it. And when visited is commented it out it's the default blue with underlines. Everything but a:link is working.
everything works in IE but not FF or Opera. I haven't tried it on chrome, I don't have it. There are no other link styles declared anywhere( HTML or CSS). Roll is a class of links in a UL.

a.roll:link { color:#8B96D6; text-decoration: none;}

/*a.roll:visited { color:#AD8BD6; text-decoration: none; }*/

a.roll:hover { color:#000075; text-decoration: none; }

a.roll:active { color:#E4E6F2; text-decoration: none; }

I'm at a loss.

[riptide]

I don't have the site online so can you tell me if the code I posted looks funny because it looks right to my eyes.

[djr33]

I think it would work if you just remove :link. (I think then it is necessary to have this at the beginning of your code, as it is now.)

[riptide]

a.roll{ color:#8B96D6; text-decoration: none;}
Still works in IE7-8 but fails in FF. Visited is overriding the link color.

here is the rest of my CSS.


<style type="text/css">
<!--
a.roll{ color:#8B96D6; text-decoration: none;}

a.roll:visited { color:#AD8BD6; text-decoration: none; }

a.roll:hover { color:#000075; text-decoration: none; }

a.roll:active { color:#E4E6F2; text-decoration: none; }



#links {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
list-style-type: circle;
position: absolute;
z-index: 8;
width: 150px;
left: -18px;
top: 98px;
height:3em;
line-height:3em;
color:#000075;
}


html {
height: 108%;

}

#main {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-align: justify;
padding: 0px;
height: 100%;
width: 80%;
position: absolute;
z-index: 1;
left: 200px;
top: 0px;
}
#navi {
position: absolute;
z-index: 2;
height: 100%;
width: 180px;
left: -2px;
top: 0px;
}
#trans {
background-image: url(nav.gif);
background-repeat: repeat-y;
display: block;
position: relative;
z-index: 3;
height: 100%;
width: 200px;
left: 17px;
top: 0px;
filter:alpha(opacity=60);
-moz-opacity:.6;
opacity:.6;
-khtml-opacity: .6;
}
#logo {
position: absolute;
height: 110px;
width: 100%;
left: 0px;
top: -1px;
z-index: 5;
background-image: url(logo.gif);
background-repeat: no-repeat;
background-position: right;
}
#Lfix {
background-color: #000075;
position: absolute;
height: 116px;
width: 99%;
left: -2px;
top: -7px;
z-index: 3;
display:block;
}
body {
background-image: url(background.jpg);
background-repeat: repeat;
height: 130%;
position: relative;
top:-8px;
left:-8px;
width: 100%;
}
#NAfix {
background-image: url(side.gif);
background-repeat: no-repeat;
background-position: top;
position: absolute;
z-index: 4;
height: 150px;
width: 40px;
left: 0px;
top: 0px;
display:block;
height: 100%;
}
#side {
background-color: #000075;
position: absolute;
z-index: 5;
height: 100%;
width: 23px;
left: 0px;
top: 0px;
height: 100%;
}
.sep {
background-color: #000075;
display: block;
height: 45px;
width: 195px;
color: #C6D0D9;
font-weight:bold;
}
.space {
height:45px;
width: 200px;
}
.space:hover {
height: 45px;
width: 200px;
background:url(button.png);
color:#00CCFF;

}

#copy{ text-align:center;
color:#FFFFFF;
position:relative;
left:-12px;
width:220px;
top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;


}

#Left {
background-image: url(footer1.gif);
background-repeat: no-repeat;
position: relative;
top: 0px;
display:block;
height:92px;
width:44px;
left:-2px;
}
#foot {
position: absolute;
z-index: 9;
height: 95px;
width: 100%;
left: -2px;
bottom: -30px;
}
#Right {
background-image: url(footer2.gif);
background-repeat: no-repeat;
position: absolute;
top: 0px;
height:92px;
width:43px;
right:0px;
display:block;
background-position: right;
}

#Bfix {
background-color: #000075;
position: absolute;
height: 75px;
width: 95%;
left: 41px;
display:block;
top: 17px;
z-index: 8;

}
#Flinks {
background-color: #01016B;
position: absolute;
z-index: 10;
height: 30px;
width: 350px;
left: 30%;
top:15px;
text-align: center;
word-spacing: 4em;

}


-->
</style>

[jscheuer1]

If the link is visited, it will show the visited color. You have to choose from three options:


Don't visit it.
Set the visited color to the same color as the link color.
Set the visited color to one that's acceptable to you, should the link in fact be visited.

[djr33]

For testing, you can also clear your history and your cache. (I'm not sure which, or maybe both, contribute to "visited" in various browsers.)

[riptide]

I never visited all the links but they all are the visited color. I refresh.
I'm wondering why IE is the only one showing the links correctly.

[jscheuer1]

Oddly, with css and <a> tag pseudo classes (like :link, :visited, etc.), IE is often the only one to get it wrong. Perhaps you've somehow relied upon IE's quirks to get the desired result.

In any event, it's hard to diagnose this without a full demo of the problem:

Please post a link to a page on your site that contains the problematic code so we can check it out.

If the page isn't up live yet, please put up a demo that shows the problem and give us a link to that.

[riptide]

I can't put the site up but I can give the whole code and you can copy/paste it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pride Services</title>
<style type="text/css">
<!--
a.roll{ color:#8B96D6; text-decoration: none;}

a.roll:visited { color:#AD8BD6; text-decoration: none; }

a.roll:hover { color:#000075; text-decoration: none; }

a.roll:active { color:#E4E6F2; text-decoration: none; }



#links {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
list-style-type: circle;
position: absolute;
z-index: 8;
width: 150px;
left: -18px;
top: 98px;
height:3em;
line-height:3em;
color:#000075;
}


html {
height: 108%;

}

#main {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-align: justify;
padding: 0px;
height: 100%;
width: 80%;
position: absolute;
z-index: 1;
left: 200px;
top: 0px;
}
#navi {
position: absolute;
z-index: 2;
height: 100%;
width: 180px;
left: -2px;
top: 0px;
}
#trans {
background-image: url(nav.gif);
background-repeat: repeat-y;
display: block;
position: relative;
z-index: 3;
height: 100%;
width: 200px;
left: 17px;
top: 0px;
filter:alpha(opacity=60);
-moz-opacity:.6;
opacity:.6;
-khtml-opacity: .6;
}
#logo {
position: absolute;
height: 110px;
width: 100%;
left: 0px;
top: -1px;
z-index: 5;
background-image: url(logo.gif);
background-repeat: no-repeat;
background-position: right;
}
#Lfix {
background-color: #000075;
position: absolute;
height: 116px;
width: 99%;
left: -2px;
top: -7px;
z-index: 3;
display:block;
}
body {
background-image: url(background.jpg);
background-repeat: repeat;
height: 130%;
position: relative;
top:-8px;
left:-8px;
width: 100%;
}
#NAfix {
background-image: url(side.gif);
background-repeat: no-repeat;
background-position: top;
position: absolute;
z-index: 4;
height: 150px;
width: 40px;
left: 0px;
top: 0px;
display:block;
height: 100%;
}
#side {
background-color: #000075;
position: absolute;
z-index: 5;
height: 100%;
width: 23px;
left: 0px;
top: 0px;
height: 100%;
}
.sep {
background-color: #000075;
display: block;
height: 45px;
width: 195px;
color: #C6D0D9;
font-weight:bold;
}
.space {
height:45px;
width: 200px;
}
.space:hover {
height: 45px;
width: 200px;
background:url(button.png);
color:#00CCFF;

}

#copy{ text-align:center;
color:#FFFFFF;
position:relative;
left:-12px;
width:220px;
top:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;


}

#Left {
background-image: url(footer1.gif);
background-repeat: no-repeat;
position: relative;
top: 0px;
display:block;
height:92px;
width:44px;
left:-2px;
}
#foot {
position: absolute;
z-index: 9;
height: 95px;
width: 100%;
left: -2px;
bottom: -30px;
}
#Right {
background-image: url(footer2.gif);
background-repeat: no-repeat;
position: absolute;
top: 0px;
height:92px;
width:43px;
right:0px;
display:block;
background-position: right;
}

#Bfix {
background-color: #000075;
position: absolute;
height: 75px;
width: 95%;
left: 41px;
display:block;
top: 17px;
z-index: 8;

}
#Flinks {
background-color: #01016B;
position: absolute;
z-index: 10;
height: 30px;
width: 350px;
left: 30%;
top:15px;
text-align: center;
word-spacing: 4em;

}


-->
</style>
</head>

<body>


<span id="Lfix" > </span><div id="logo"></div> <!-- logo container/Header-->



<div id="navi"> <!--//navigation start///-->
<span id="trans"> </span> <span id="NAfix"> </span> <div id="side"></div> <!-- graphics for the links-->

<!-- links start-->
<ul id="links" >


<li class="space"><a class="roll" href="#">&nbsp; Home</a></li>

<li class="space"><a class="roll" href="#">&nbsp; Concrete Renovation </a></li>
<li class="space"> <a class="roll" href="#">&nbsp; Electrostatic Painting</a></li>

<li class="sep">Advice</li> <!-- blue block-->


<li class="space"> <a class="roll" href="#">&nbsp; Ask the Clean Guy </a></li>
<li class="space"><a class="roll" href="#">&nbsp; Graffiti Removal</a></li>
<li class="space"><a class="roll" href="#">&nbsp; Wood Refinishing</a></li>
<li class="space"> <a class="roll" href="#">&nbsp; Cleaning Software</a></li>

<li class="sep">Pride Services Inc. </li><!-- blue block-->



<li class="space"> <a class="roll" href="#">&nbsp; About Pride</a></li>
<li class="space"> <a class="roll" href="#">&nbsp; Contact Us</a></li>

<!--<li class="space"><a class="roll" href="#">&nbsp;Pressure Wash </a></li> extra link-->


</ul><!--Link end-->

</div><!--///navigation end///-->




<div id="main">

<!-- Page content goes here-->






</div><!--///Main area end///-->






<div id="foot" onmouseover="style:Document.getelementbyID(ser).display='none'"> <!--///Footer start///-->
<span id="Left"></span>
<span id="Bfix" onmouseover="style:Document.getelementbyID(adv).display='none'" > <!--Bfix start-->
<!-- Footer content goes here-->
<p id="copy" >
© 1996-2003 PRIDE Services Inc.
231 S. Grant Ave.
Fort Collins, CO 80521
800.427.6640
970.493.6254 (FAX)
</p>

<div id="Flinks" onmouseover="style:Document.getelementbyID(pri).display='none'" > <!--Flinks start-->

<!-- Footer links-->

<span class="FF" onmouseover="style:Document.getelementbyID(ser).display='block'" >Service <span id="ser" >
<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>
</span></span>


<span class="FF" id="adv" >Advice<span id="adv" >
<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>
</span></span>


<span class="FF" id="pri" href="#"> Pride<span id="pri" href="#">
<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>
</span> </span>



</div> <!--end Flinks-->


</span><!--end Bfix-->

<span id="Right"></span>
</div><!--///end Footer///-->

</body>
</html>

There are a few images but the page is a template so they are unimportant.

[riptide]

sorry for double posting but I'm having a some glitches with <p> tags. strange space seems to be getting between them. Maybe I have a corrupt HTML file.
Okay I switched files and I think that might have fixed a few things but I know what is wrong in firefox now but it leads to more questions.

a.roll:visited { color:#AD8BD6; text-decoration: none; }

a.classname:visited doesn't function correctly
If I click on one link FF acts if I clicked on all of them at once. They all turn to the visited color. it doesn't do this with hover so I have no idea why that's happening.

[riptide]

okay I think I found the problem but I don't understand it.

It looks like fire fox changes any link to the visited color if links to the same page as the link I clicked on. This would include # too. It's dumb ass hell, I have no idea why they do it.

[jscheuer1]

If you mean these links:



<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>
</span></span>


<span class="FF" id="adv" >Advice<span id="adv" >
<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>
</span></span>


<span class="FF" id="pri" href="#"> Pride<span id="pri" href="#">
<a href="#"> Home</a> <a href="#"> Electro</a> <a href="#"> Con</a>

They are all the same. Any browser that doesn't mark them all visited when any of them are clicked is doing it wrong.

[djr33]

Since those are just testing links, you can add a random string to the end of the link, such as #1 or #2.

[riptide]

If you mean these links:



They are all the same. Any browser that doesn't mark them all visited when any of them are clicked is doing it wrong.

I thought IE was the one who was right. :mad: Oh well. I learned my lesson and will take djr33's advice from how on.