Member Avatar for 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>
  • 2 Contributors
  • 8 Replies
  • 258 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by tasteypaste

Dani AI

Generated

A short, focused checklist and a couple of small fixes to complement the thread.

correctly flagged invalid color notation and duplicate declarations; noted the doctype and consolidation of styles. Common remaining causes are: a higher-specificity or later rule overriding the link rules, malformed HTML (which can change the DOM), or the stylesheet not actually loading from where the rule is expected. The quickest way to narrow the cause is to inspect the anchor in a browser’s developer tools, confirm the computed color and the exact rule (file/line) that is taking effect, then work back from there.

Quick debugging checklist:

  • Inspect the anchor element and its computed styles to see which selector is winning and which stylesheet it comes from.
  • Search the markup for stray or malformed anchors/attributes (nested anchors, broken quotes) that will produce an unexpected DOM.
  • Look for inline styles, legacy <font> tags, or selectors using !important that override normal rules.
  • Confirm the stylesheet load order: later rules override earlier ones; an identical selector in a later file will win.
  • Clear cache or do a hard reload to ensure the latest stylesheet is used.
  • If a rule still does not apply, force-test with a very specific selector and !important to prove CSS is capable of changing the color; then reduce specificity to the desired level.

A quick force-test (place in a stylesheet loaded last):

/* quick test: force a visible change to verify cascade */
#atable #links a,
#atable #links a:visited {
  color: #333333 !important;
}

For spacing between links prefer small margin or padding on the anchor or container instead of empty paragraphs; display:inline-block on anchors gives precise vertical spacing control. Note also: modern browsers restrict what can be probed about visited links for privacy (color changes are allowed, but scripts cannot reliably report visited state).

Recommended Answers

All 8 Replies

Member Avatar for 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

Edited by almostbob because: n/a
Member Avatar for 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>
Member Avatar for 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:

Edited by almostbob because: n/a
commented: Very concise and helpful. +0
Member Avatar for 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?

Member Avatar for almostbob 
<p>&nbsp;</p>

or just css style the margins

element {margin-top:1em;}
Edited by almostbob because: n/a
Member Avatar for 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.

Member Avatar for almostbob

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

Member Avatar for tasteypaste

CSS alternative worked great, thanks again.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.