Link Color Not Changing According to CSS

[tasteypaste]

I am currently trying to edit a page that has a bunch of links on the page. All of them are in tables and are supposed to turn a dark gray color and then become darker one they become visited. However, they show up like normal links. (Blue) The page has a template attached that implements the CSS style sheet SoundOff which contains the link colors. Any advice for how I can get this functional is much appreciated.

CSS Style
--------------------------------------------------------------------
<style type="text/css">
<!--
.titleText {
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}
.fontSize {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
.textAlignCent {
	text-align: center;
}
.textFont {	color: #CC0000;
	text-align: center;
	font-size: 18px;
}
-->
</style>
<style type="text/css">
<!--
.firstLine {	line-height: 13px;
	text-align: left;
	vertical-align: top;
}
.leftAlign {	text-align: left;
	vertical-align: top;
	line-height: 14pt;
}
.topMiddle {	text-align: center;
	vertical-align: top;
}
-->
</style>
<style type="text/css">
<!--
a:visited {
	color: #666;
}
-->
</style><!-- InstanceEndEditable -->
<link href="../soundoff.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: 333333;
}
a:visited {
	color: 333333;
}
a:hover {
	color: 333333;
}
a:active {
	color: 333333;
}
#search {	position:absolute;
	width:400;
	height:20;
	z-index:2;
}

--------------------------------------------------------------------
PART OF THE CODE WHERE A LINK IS FEATURED
--------------------------------------------------------------------
<table width="608" height="2526" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" id="atable">
        <tr>
          <td height="25" align="left" valign="top" class="indexlink"><div id="links"><a href="http://www.soundoffsignal.com" target="_self">Home</a> » Literature</div></td>
        </tr>
        <tr> </tr>
        <tr>
          <td height="2501" width="608" align="left" valign="top" background="Images/background.jpg">
          <p>&nbsp;</p>
          <p>&nbsp;</p>
     	  <p><br />
     	  </p>
     	  <table border="0" align="center">
     	    <tr>
     	      <td><span class="fontSize">If any of the catalogs or flyers on this page are not viewable, <a href="http://get.adobe.com/reader/">download Acrobat Reader here</a> </span></td>
   	      </tr>
   	    </table>
   	    </p>
     	  <table width="550" border="0" align="center">
     	    <tr>
     	      <td width="250" align="center"><p><a href="../warnamber/Catalog_WarnProd/SOS_Lit_OrderForm.pdf" target="_blank">Literature Order Form<br />
     	        </a>(0.1 mb) <a href="../warnamber/Catalog_WarnProd/SOS_Lit_OrderForm.pdf"><br />
   	          </a></p></td>
     	      <td width="250" align="center"><a href="../warnamber/Catalog_WarnProd/SOS_Warr&amp;RGA.pdf" target="_blank">Warranty Policy<br />
   	        </a>(1.4 mb) </td>
   	      </tr>
   	    </table>

[almostbob]

the page is not complete, for cutnpaste simplicity i Know, so these may be considered doh questions but,,
Is there a DTD declared as the first line of the file, without a dtd the file is html2 and most styling will not work
Are all those multiple stylesheets inside <style></style> there is one there incomplete, I assume copy/paste issues but have to ask a:visited is defined twice is the code shown, is it defined also in the linked stylesheet, the results may not be as you expect because only the last definition of any element actually does anything

<link href="../soundoff.css" rel="stylesheet" type="text/css" />
<style type='text/css'><!--
.titleText { font-size:36px; font-weight:bold; text-align:center; }
.fontSize { font-size:12px; font-weight:bold; text-align:center; }
.textAlignCent { text-align:center; }
.textFont { color:#CC0000; text-align:center; font-size:18px; }
.firstLine { line-height:13px; text-align:left; vertical-align:top; }
.leftAlign { text-align:left; vertical-align:top; line-height:14pt; }
.topMiddle { text-align:center; vertical-align:top; }
a:link { color:#333333; } //no hash in original code will be ignored
a:visited { color:#666; } // will be ignored because of later declaration
a:visited { color:#333333; } //no hash in original code will be ignored
a:hover { color:#333333; } //no hash in original code will be ignored
a:active { color:#333333; } //no hash in original code will be ignored
#search { position:absolute; width:400; height:20; z-index:2; } /* 400what 20what dimension are important, position:absolutel requires a position as top: left:, top: right:, bottom: left:, bottom: right:, pairs or top: right: bottom: left: */
--></style>

incorrect code puts browsers in unpredictable quirks mode
many browsers just ignore it

px are not recommended as layout dimensions the current W3c recommendation is ems and %, scalars that adjust to window size and user preference
on my monitor 10px is 0.08inch high
on next generation monitors a px will be smaller
preserving relative sizes body text at 1em, header text at 2em, subnotes at 0.85em (example only) means that however large the monitor
or
however bad the users vision is requiring basefonts set up at 40+px,
the text remains the same, highlighted lowlighted and Visible

[tasteypaste]

I guess I should have posted a little more of an explanation. This is an old site that will soon be taken down and replaced with an entirely new one. I just needed to update this page in the mean time so that it would keep up with the current information. Hopefully that will explain why some of the code is a bit older. I do completely agree with you that px is outdated, the newer site does not use this.

However, now I will address your questions. The document does have the DTD declaration at the top as a HTML file. I did catch the part about the a:visited being in the code twice. I'm honestly confused how that got there, but it is gone now. I have also consolidated the CSS style sheets into the main Soundoff css. The template that is implemented on the page was updated to reflect the new CSS, but to no avail. The problem still exists. I will post the newer code below. As you stated, this is only a section of the code to preserve space. If anything else is needed to make it easier to understand or read, I will do whatever would make sense. Thanks.

CSS
---------------------
<style type="text/css" media="screen">
	@import url("../template_info/navbar/navbar.css");
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../soundoff.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	color: 333;
}
a:visited {
	color: 333;
}
a:hover {
	color: 333;
}
a:active {
	color: 333;
}
#search {	position:absolute;
	width:400;
	height:20;
	z-index:2;
}
-->
</style>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
-------------------------------------
Page
-------------------------------------
<table width="608" height="2526" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" id="atable">
        <tr>
          <td height="25" align="left" valign="top" class="indexlink"><div id="links"><a href="http://www.soundoffsignal.com" target="_self">Home</a> » Literature</div></td>
        </tr>
        <tr> </tr>
        <tr>
          <td height="2501" width="608" align="left" valign="top" background="Images/background.jpg">
          <p>&nbsp;</p>
          <p>&nbsp;</p>
     	  <p><br />
     	  </p>
     	  <table border="0" align="center">
     	    <tr>
     	      <td><span class="fontSize">If any of the catalogs or flyers on this page are not viewable, <a href="http://get.adobe.com/reader/" target="_blank">download Acrobat Reader here</a> </span></td>
   	      </tr>
   	    </table>
   	    </p>
     	  <table width="550" border="0" align="center">
     	    <tr>
     	      <td width="250" align="center"><p><a href="../warnamber/Catalog_WarnProd/SOS_Lit_OrderForm.pdf" target="_blank">Literature Order Form<br />
     	        </a>(0.1 mb) <a href="../warnamber/Catalog_WarnProd/SOS_Lit_OrderForm.pdf"><br />
   	          </a></p></td>
     	      <td width="250" align="center"><a href="../warnamber/Catalog_WarnProd/SOS_Warr&amp;RGA.pdf" target="_blank">Warranty Policy<br />
   	        </a>(1.4 mb) </td>
   	      </tr>
   	    </table>

[almostbob]

a:visited { color: 333;} vs a:visited { color:#333;} There are four ways to declare color in css

1. As a standard color name P {color: green}
2. As a hexadecimal value P {color: #333333} // note the hash
3. As an RGB percentage P {color: rgb(70%, 0%, 30%)}
4. As a decimal value from 0 to 255 P {color: rgb(170, 0, 100)}

none of them are just numeric, in lines 11-22

ref:http://www.devx.com/projectcool/Article/19851

[tasteypaste]

Well, that was way easier than I had made it out to be. Thank you Almostbob.

Maybe you can answer a quick question. And I would say it should be qualified as more of a novice question. Oh well. Do you know a way to do a line break that would be support in IE? Every time I try to have some line separation between menus using <p></p> with nothing between it, IE assumes it shouldn't be there and omits it. Any ideas?

[almostbob]

<p>&nbsp;</p>

or just css style the margins

element {margin-top:1em;}

[tasteypaste]

I am currently using <p>&nbsp;</p> but it's just a little to large of a gap for what I'm trying to do. Anything intermediate? If not, margins will be where I head to next.

[almostbob]

put <br> as the first character of the next element ???

[tasteypaste]

CSS alternative worked great, thanks again.