CSS - Html Links That Dont Change If Already Visited

Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text.

So, is there a way to specify a:visited { color: do-not-change; }?

I have been having a problem with my CSS.
I want to make my visited links just a big bigger than my unvisited links so that the users can know where they been


Code:

#mainCategories a:link{
	font-size:.55em;
}
#mainCategories a:visited{
	font-size:.65em;
}
#mainCategories a:hover{
	font-size:.65em;
}
#mainCategories a:active{
	font-size:.65em;
}

it changes size on a:hover but not on a:visited

Good day,

I am a newbie, both to CSS and to these forums.

I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997.

I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2.

Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work.

The page I am working with is at beverlyfoundation . org / library / index . html


/* THE BASICS */
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #eaf5ff;
margin: 0px;
padding: 0px;
background-color: #c2d8ec;
}

p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 14px;
margin-left: 0px;
}

img {
border: none;
}


a:link, a:visited { text-decoration: none; color: #EAF5FF; }
a:active, a:hover { text-decoration: underline; color: #E51322; }


/* HEADERS */
h1, h2, h3 {
font-family: Helvetica, Arial, Verdana, sans-serif;
margin: 0px 0px 14px;
}

h1 {
font-size: 220%;
text-align: right;
font-style: italic;
}
h2 { font-size: 140%; }

ul {
list-style-position: outside;
list-style-type: square;
}

/* TOP COLORED LINKS */
.navcells {
text-align: center;
vertical-align: middle;
padding: 2px;
font-weight: bold;
font-size: 11px;
}

#navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; }



/* LAYOUT */
#header {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(../images/header_gradient01_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}


#content {
padding: 10px 20px 10px 10px;
background-color: #0060BE;
text-align: left;
vertical-align: top;
font-size: 12px;
}


#rightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#splashrightcolumn {
background-color: #0060BE;
padding: 10px;
width: 220px;
font-size: 11px;
}

#rightcolumn img {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

#rightcolumn p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
}

#rightcolumn h1 {
font-size: 180%;
text-align: center;
font-style: italic;
}

#rightcolumn h2 {
margin-top: 21px;
margin-right: 0px;
margin-bottom: 7px;
margin-left: 0px;
text-align: center;
}

#rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; }
#rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; }


#threecolumn {
padding: 10px;
width: 220px;
text-align: left;
vertical-align: top;
font-size: 12px;
}

#threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; }
#threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; }


#footer {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
line-height: 14px;
}

#footer a {
color: #EAF5FF;
text-decoration: none;
}



#address {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
border-left-width: 1px;
border-top-color: #EAF5FF;
border-right-color: #EAF5FF;
border-bottom-color: #EAF5FF;
border-left-color: #EAF5FF;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
}

#address a {
color: #EAF5FF;
text-decoration: underline;
}


#address h2 {
margin: 0px;
}

.threecolumns {
color: #EAF5FF;
padding: 10px;
font-size: 11px;
text-align: left;
vertical-align: top;
}

.resourcestore p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
.gradientrow {
background-image: url(../images/footer_bg01.jpg);
}
.copyright {
font-size: 10px;
}
.resourcestore {
padding: 10px;
}

That title is probably a little confusing but it is what's happening.

I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up.

The page...

http://www.vaska.com/a/

The css...

http://www.vaska.com/a/css/c.css

To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue.

I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well.

Thanks for any help...v

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.