code validation questions

Question

teedoff 3 Posting Pro

14 Years Ago

Hi, I have one page thats really throwing alot of code violations at validator.w3.org.
This is a CF site and when I view source from the browser and paste the code in the validator, I get like 190 errors all stemming from one piece of coding I think. I created a query that returns some industry definitions and set anchors at the top of the page so the user can automatically "go to" the definition he wants. Here is the code in question:

<a id="A"><a href="#A">A</a><a id="B"><a href="#B">B</a><a id="C"><a href="#C">C</a><a id="D"><a href="#D">D</a><a id="E"><a href="#E">E</a><a id="F"><a href="#F">F</a><a id="G"><a href="#G">G</a><a id="H"><a href="#H">H</a><a id="I"><a href="#I">I</a><a id="J"><a href="#J">J</a><a id="K"><a href="#K">K</a><a id="L"><a href="#L">L</a><a id="M"><a href="#M">M</a><a id="N"><a href="#N">N</a><a id="O"><a href="#O">O</a><a id="P"><a href="#P">P</a><a id="Q"><a href="#Q">Q</a><a id="R"><a href="#R">R</a><a id="S"><a href="#S">S</a><a id="T"><a href="#T">T</a><a id="U"><a href="#U">U</a><a id="V"><a href="#V">V</a><a id="W"><a href="#W">W</a><a id="X"><a href="#X">X</a><a id="Y"><a href="#Y">Y</a><a id="Z"><a href="#Z">Z</a>

and here is the error message:

Line 54, Column 660: document type does not allow element "a" here; missing one of "object", "span", "bdo", "applet", "iframe", "tt", "i", "b", "u", "s", "strike", "big", "small", "font", "em", "strong", "dfn", "code", "q", "samp", "kbd", "var", "cite", "abbr", "acronym", "sub", "sup", "label", "ins", "del" start-tag
…><a id="W"><a href="#W">W</a><a id="X"><a href="#X">X</a><a id="Y"><a href="#Y…✉
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

There is another error related to this design which I think is because of the use of the "#" symbol.

Not sure what to change or what to do differently to validate this page. Any help is greatly appreciated!

coldfusion

2 Contributors
21 Replies
182 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by arrgh

arrgh 22 Posting Whiz

14 Years Ago

Playing around with the validator it doesn't seem to like the unclosed anchor <a> tags. It also didn't seem to like anchors that weren't nested inside some element like a <p> or <div> ...? This validated with 1 warning.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Test</title>

</head>
  <body>
      <div>
      <a id="A" />
      <a href="#A">A</a>
      <a id="B" />
      <a href="#B">B</a>  
      </div>
</body>
</html>

arrgh 22 Posting Whiz

14 Years Ago

Well what you posted validates fine. Same 1 warning as mine. So it must be something else in the content.. or maybe it's nested differently in the real code.

arrgh 22 Posting Whiz

14 Years Ago

But notice the difference between that and your original code. In the original the tags weren't closed, which *doesn't* validate. It didn't seem to care much about the # signs.

arrgh 22 Posting Whiz

14 Years Ago

I did a view source, and the tags are nested differently. It doesn't seem to like this:

This is okay though
<a id="A"/><a href="#A">A</a>

arrgh 22 Posting Whiz

14 Years Ago

Very weird. *Now* I'm seeing the closing tags in view source. An abbreviated version of the page validates fine.

<!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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Replacement Light Bulbs : Definitions Page</title>
<!-- TemplateEndEditable -->
<link href="rlb.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="wrapper">

  <div id="header"><a href="index.cfm"><img src="images/rlblogo.jpg" alt="Replacement Light Bulbs" width="445" height="76" hspace="10" vspace="5" border="0" /></a>
  <div id="search"><form action="http://www.auctioninc.com/cart/"
 enctype="application/x-www-form-urlencoded" method="post"><input
 name="cmd" value="_cart" type="hidden" /><input name="business"
 value="1808" type="hidden" /><!-- View Cart Button --><input
 name="viewcart_btn" value="View Cart" type="submit" />
  
		
</form></div>
  
  <br clear="none" />
  <hr />
</div>

<div id="main">

    <div id="sidebar">
      <ul>

  <li><a href="index.cfm">Home</a></li>
  <li><a href="faqs.cfm">FAQS</a></li>
  <li><a href="http://www.replacementlightbulbs.com/lampscrossreference.html">Cross References</a></li>
  <li><a href="shipping.cfm">Shipping</a></li>
  <li><a href="http://www.replacementlightbulbs.com/policy.html">Policies</a></li>
  <li><a href="terms.cfm">Definitions</a></li>

  <li><a href="contactUs.cfm">Contact Us</a></li>
</ul><br />

<p><strong>Sales:</strong><br />
1-800-692-3051</p>
<p><strong>Technical Support Line:</strong><br />
 1-336-882-2854</p>
<p><strong>Fax Line:</strong><br />
 1-336-882-2819</p>
    </div>

    <!-- TemplateBeginEditable name="mainContent" -->
    <div id="content">
     
      <h2><a id="A" /><a href="#A">A</a><a id="B" /><a href="#B">B</a><a id="C" /><a href="#C">C</a><a id="D" /><a href="#D">D</a><a id="E" /><a href="#E">E</a><a id="F" /><a href="#F">F</a><a id="G" /><a href="#G">G</a><a id="H" /><a href="#H">H</a><a id="I" /><a href="#I">I</a><a id="J" /><a href="#J">J</a><a id="K" /><a href="#K">K</a><a id="L" /><a href="#L">L</a><a id="M" /><a href="#M">M</a><a id="N" /><a href="#N">N</a><a id="O" /><a href="#O">O</a><a id="P" /><a href="#P">P</a><a id="Q" /><a href="#Q">Q</a><a id="R" /><a href="#R">R</a><a id="S" /><a href="#S">S</a><a id="T" /><a href="#T">T</a><a id="U" /><a href="#U">U</a><a id="V" /><a href="#V">V</a><a id="W" /><a href="#W">W</a><a id="X" /><a href="#X">X</a><a id="Y" /><a href="#Y">Y</a><a id="Z" /><a href="#Z">Z</a></h2>


    </div>
    <!-- TemplateEndEditable -->
</div>
  <div id="footer"><br clear="none" />

  <hr />
  <p>Copyright &copy; 2010 Replacement Light Bulbs</p>
  <p><a href="index.cfm">Home</a> | <a href="admin/adminHome.cfm">Admin</a></p>
</div>
</div>

</body>
</html>

Reply to this topic

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.

teedoff 3 Posting Pro · Answer 1 · 2010-10-12T05:30:28+00:00

This is what I have now and at validator.w3.org I get 110 errors. Now they seem to be ok with the anchor tags, but I think its giving me problems because of the "#" in my anchor links. I tried escaping them with one or two other hash marks, but that didnt help.

<div id="content">
<h2>
<a id="A" /><a href="#A">A</a>
<a id="B" /><a href="#B">B</a>
<a id="C" /><a href="#C">C</a></h2></div>

Thanks for the help so far!

teedoff 3 Posting Pro · Answer 2 · 2010-10-12T05:43:23+00:00

There is another error related to this design which I think is because of the use of the "#" symbol.

From my original post this is what I meant about the # marks. Yes I didnt have the anchor tags closed correctly at first. I fixed that so now the hash marks are the errors I'm getting. hmm not sure then.

And you are correct. If I take just the code I posted above and place it between html and body tags, it validates fine. Strange that it doesnt say anything about the hash marks unless its the page source itself.

If you could view my page and the source code, maybe something IS different than what you're seeing.

http://teed-younger.com/terms.cfm

teedoff 3 Posting Pro · Answer 3 · 2010-10-12T06:29:41+00:00

lol ok this is crazy! I dont see
<a id="A"><a href="#A">A</a></a> in my source code

I see this:
<a id="A" /><a href="#A">A</a>

But still get this error 110 times:

Line 84, Column 57: character "#" is not allowed in the value of attribute "name"
<th valign="top" bgcolor="#CCCCCC"><a name="#A"></a>ANSI Code✉
It is possible that you violated the naming convention for this attribute. For example, id and name attributes must begin with a letter, not a digit.

arrgh 22 Posting Whiz · Answer 4 · 2010-10-12T06:35:42+00:00

Oohh... duh! You've got more anchor tags in the page. It's saying you can't use # in the "name" of anchor. Which is true. Because # is used in href only

ie You can't say this:
<a name="#R" />

Because you use it to reference that name in the href
<a name="#R">Go to "R"</a>

It has to be written without the "#"
<a name="R" />
<a name="#R">Go to "R"</a>

teedoff 3 Posting Pro · Answer 5 · 2010-10-12T06:41:11+00:00

lol Ok I will try that, but....the letters are dynamically called as well. Im my query I run a SQL function that pulls the first letter of every record
i.e

<cfquery name="rsTerms" datasource="rlbulbs">
SELECT rlbterms.terms, rlbterms.definitions, LEFT(rlbterms.terms,1) AS letterField
FROM rlbterms
ORDER BY rlbterms.terms
</cfquery>

here is my cfoutput:

<cfoutput query="rsTerms" group="letterField"><a id="#rsTerms.letterField#" /><a href="###rsTerms.letterField#">#rsTerms.letterField#</a></cfoutput>

let me try it without the hash mark.

arrgh 22 Posting Whiz · Answer 6 · 2010-10-12T06:46:04+00:00

That looks okay. But the anchors I'm talking about are in the content section.

ie
<th valign="top" bgcolor="#CCCCCC"><a name="#R"/>Reflector Lamp (R)</th>
<td>A light source with a built-in reflecting surface.

teedoff 3 Posting Pro · Answer 7 · 2010-10-12T06:51:13+00:00

Yes you're right. I took out the hash mark here:

<cfoutput query="rsTerms">
          <tr>
            <th valign="top" bgcolor="##CCCCCC"><a name="#rsTerms.letterField#"></a>#rsTerms.terms#</th>
            <td>#rsTerms.definitions#</td>
          </tr>
        </cfoutput>

which now shows this:

<th valign="top" bgcolor="#CCCCCC"><a name="Q"></a>Quartz-Halogen</th>

and it now validates, but when I click on a letter,,say Z, it doesnt take me down to the bottom of the page..lol

arrgh 22 Posting Whiz · Answer 8 · 2010-10-12T07:07:15+00:00

ROFL. Fixed the problem didn't we? Let me look again.

teedoff 3 Posting Pro · Answer 9 · 2010-10-12T07:14:02+00:00

lol yeah Three hash marks throws the errors, one hash mark validates but doesnt work, and two hash marks throws a CF error..lol

arrgh 22 Posting Whiz · Answer 10 · 2010-10-12T07:15:31+00:00

I still see the # signs in the content. But also, I the "ids" are messing things up. A view source showed this:

(Header)
<a id="Z" /><a href="#Z">Z</a>
(content)
<tr>
<th valign="top" bgcolor="#CCCCCC"><a name="#Z"></a>Zone Lighting</th>
<td>In dimming, lights that are operated together. Also called Channel Lighting.</td>
</tr>

When I removed the anchor with only an "id":
<a href="#Z">Z</a>

.. and removed the # sign from the content anchor, and used the close shortcut "/", it worked as expected. ie Clicking on "Z" jumped to that section.
<tr>
<th valign="top" bgcolor="#CCCCCC"><a name="Z" /> Zone Lighting</th>
<td>In dimming, lights that are operated together. Also called Channel Lighting.</td>
</tr>

teedoff 3 Posting Pro · Answer 11 · 2010-10-12T07:52:34+00:00

hmmmm I cant get it to work and validate at the same time...lol
I think this is definately a CF issue rather than an html. I HAVE to have the three # marks in my anchors

<cfoutput query="rsTerms" group="letterField"><a id="#rsTerms.letterField#" /><a href="###rsTerms.letterField#">#rsTerms.letterField#</a></cfoutput>

and I have to have the three hash marks in the name anchor here:

<th valign="top" bgcolor="##CCCCCC"><a name="###rsTerms.letterField#"></a>#rsTerms.terms#</th>

arrgh 22 Posting Whiz · Answer 12 · 2010-10-12T08:20:18+00:00

No. You shouldn't have # marks for the anchor "name" OR the closing </a> tag. That's what the validator is complaining about ;-)

I updated the code on my previous post. You need to get rid of all the empty anchors in the header (that only have an "id"). Then your code should look like this:

Header:
<a href="#Z">Z</a>

The matching target in the content should be:
<a name="Z" /> Zone Lighting

teedoff 3 Posting Pro · Answer 13 · 2010-10-12T18:31:16+00:00

Ok I figured it out! lol I had too much code...lol I didn't need the

So I deleted the <a id... /> code and took out all but one hash mark from the name anchor and now it works AND validates!

Not sure why it even worked before with both lines of code, but validator didnt like it. Thanks for your help!

arrgh 22 Posting Whiz · Answer 14 · 2010-10-12T18:38:09+00:00

Not sure why it even worked before with both lines of code

Were you testing with IE? Because it'll let you do all kinds of silly things ;-)

teedoff 3 Posting Pro · Answer 15 · 2010-10-12T19:01:23+00:00

Well I have tested it in firefox as well...I also have safari and chrome and flock for some reason, but not sure I tested in them. Who knows..ie is funny sometimes.

arrgh 22 Posting Whiz · Answer 16 · 2010-10-12T20:18:56+00:00

ie is funny sometimes.

Yeah, I don't think the original version worked in FF. As far as IE ... it's got it's own weird view of the html specs IMO ;-)