Solved

W3C Validation error

Posted on 2004-10-14
10
870 Views
Last Modified: 2013-11-19
I am trying to validate a file using the W3C Validation service via upload

I get the following error

<Quote>
Sorry, I am unable to validate this document because its content type is text/plain, which is not currently supported by this service.

The Content-Type field is sent by your web server (or web browser if you use the file upload interface) and depends on its configuration. Commonly, web servers will have a mapping of filename extensions (such as ".html") to MIME Content-Type values (such as text/html).

That you recieved this message can mean that your server is not configured correctly, that your file does not have the correct filename extension, or that you are attempting to validate a file type that we do not support yet. In the latter case you should let us know that you need us to support that content type (please include all relevant details, including the URL to the standards document defining the content type) using the instructions on the Feedback Page.
<EndQuote>

The file content is here its called example.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<HTML>
  <HEAD>
    <META http-equiv="Content-Script-Type" content="text/javascript"></META>
    <META http-equiv="Content-Style-Type" content="text/css"></META>
    <SCRIPT src="example.js"></SCRIPT>
    <STYLE>
      @import url(example.css);
    </STYLE>
  </HEAD>
  <BODY>
    <SPAN class="header">Example Page</SPAN>
    <HR>
    <FORM action="" name="exampleForm">
    <TABLE cellspacing="0" cellpadding="0" width="100%">
      <TR>
      <TD class="menu-body">
        <TABLE>
          <TR>
            <TD id="menu-part-1"
              class="menu-selected"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="clickMenu('1')"
              title="Click here to show the first part">
            First&nbsp;part
            </TD>
          </TR>
          <TR>
            <TD id="menu-part-2"
              class="menu-ordinary"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="clickMenu('2')"
              title="Click here to show the second part">
            Second&nbsp;part
            </TD>
          </TR>
          <TR>
            <TD id="menu-finish"
              class="menu-ordinary"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="submitForm()"
              title="Click here when all parts have been completed">
            Finish
            </TD>
          </TR>
        </TABLE>
      </TD>
      <TD class="form-body">
        <TABLE id="form-part-1" class="form-visible">
          <TR>
            <TD class="label">
              First&nbsp;Input&nbsp;Field
            </TD>
            <TD>
              <INPUT name="input_part_1" type="text" width="20">
            </TD>
            <TD class="comment">
              Fill in a value here - any value other than "111" will be rejected
            </TD>
          </TR>
        </TABLE>
        <TABLE id="form-part-2" class="form-hidden">
          <TR>
            <TD class="label">
              Second&nbsp;Input&nbsp;Field
            </TD>
            <TD>
              <INPUT type="text" name="input_part_2" width="20">
            </TD>
            <TD class="comment">
              Fill in a value here - any value other than "222" will be rejected
            </TD>
          </TR>
        </TABLE>
        <TABLE id="form-finish" class="form-hidden">
          <TR>
            <TD class="comment">
              The form has been submitted for processing, thank you.
            </TD>
          </TR>
        </TABLE>
      </TD>
      </TR>
    </TABLE>
    </FORM>
  </BODY>
</HTML>

It all seems fine to me , so why do I get a validation error


0
Comment
Question by:tinybear
  • 5
  • 4
10 Comments
 
LVL 5

Expert Comment

by:php-webdesign
ID: 12316654
what happends if you remove thses 2 lines:

<META http-equiv="Content-Script-Type" content="text/javascript"></META>
<META http-equiv="Content-Style-Type" content="text/css"></META>

OR

try this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
0
 

Author Comment

by:tinybear
ID: 12316922
Well,

I tried the doctype change to the strict setting above and got the follwing. Weird thing as well, if  I submit the file using IE6 it wont validate at all, but submitting via Mozilla Firefox it does at least start the validation.


<QUOTE>
No Character Encoding Found! Falling back to UTF-8.

I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to reliably validate the document. I'm falling back to the "UTF-8" encoding and will attempt to perform the validation, but this is likely to fail for all non-trivial documents.

So what should I do? Tell me more...
Note:
The Validator XML support has some limitations.
This page is not Valid XHTML 1.0 Strict!

Below are the results of attempting to parse this document with an SGML parser.

   1.

      Line 3, column 5: element "HTML" undefined

      <HTML>

      You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), or by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

      &#9993;
   2.

      Line 4, column 7: element "HEAD" undefined

      <HEAD>

      &#9993;
   3.

      Line 5, column 21: there is no attribute "http-equiv"

      <META http-equiv="Content-Script-Type" content="text/javascript">

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

      &#9993;
   4.

      Line 5, column 51: there is no attribute "content"

      <META http-equiv="Content-Script-Type" content="text/javascript">

      &#9993;
   5.

      Line 5, column 68: element "META" undefined

      ...v="Content-Script-Type" content="text/javascript">

      &#9993;
   6.

      Line 6, column 60: element "META" undefined

      <META http-equiv="Content-Style-Type" content="text/css">

etc etc..

0
 
LVL 5

Accepted Solution

by:
php-webdesign earned 150 total points
ID: 12316948
and if you use this header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
0
 

Author Comment

by:tinybear
ID: 12317018
OK. I did the above but also left the 2 METAs specifying the script and style types as I had been advised that this was better

Wont validate at all using IE get the original error. Why wont it accept the file uploaded via IE6?

With Mozilla Firefox I get the following.

<QUOTE>

Line 7, column 28: required attribute "TYPE" not specified

<SCRIPT src="example.js"></SCRIPT>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.




Line 8, column 10: required attribute "TYPE" not specified

<STYLE>


Line 11, column 8: end tag for "HEAD" which is not finished

</HEAD>

Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element (e.g. 'ul') which requires a child element (e.g. 'li') that you did not include. Hence the parent element is "not finished", not complete.

Line 13, column 24: document type does not allow element "SPAN" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

<SPAN class="header">Example Page</SPAN>

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>").



Line 59, column 49: there is no attribute "WIDTH"

<INPUT type="text" name="input_part_1" width="20">

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

0
 
LVL 5

Expert Comment

by:php-webdesign
ID: 12317039
Strange that problem with IE6!! don't know what that can be (maybe post it in browser issues)

for the script error:
<SCRIPT type="text/javascript" src="example.js"></SCRIPT>
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

Author Comment

by:tinybear
ID: 12317109
Cheers.. I think I will post this in Browser issues as well as its very odd.

I also did the same for the Style tag.. So the METAs specifying that all script and styles on the page are javascript and css repsectively, cause validation errors.

I now just get:

This page is not Valid HTML 4.01 Strict!

Below are the results of attempting to parse this document with an SGML parser.

   1.

      Line 11, column 8: end tag for "HEAD" which is not finished

      </HEAD>

      Most likely, You nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

      Another possibility is that you used an element (e.g. 'ul') which requires a child element (e.g. 'li') that you did not include. Hence the parent element is "not finished", not complete.

      &#9993;
   2.

      Line 13, column 24: document type does not allow element "SPAN" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag

      <SPAN class="header">Example Page</SPAN>

      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>").

      &#9993;
   3.

      Line 59, column 49: there is no attribute "WIDTH"

      <INPUT type="text" name="input_part_1" width="20">

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

0
 
LVL 5

Expert Comment

by:php-webdesign
ID: 12317113
can you post whole the document here? will see what i can do
0
 

Author Comment

by:tinybear
ID: 12317153
Thanks ,

Ive pasted the whole code below.

Its just a sample Im working on for a multipart form so that each section can be filled in and then hidden as each section is completed.

I'll post the CSS, Jscript file and HTM

HTML file example.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <META http-equiv="Content-Script-Type" content="text/javascript">
    <META http-equiv="Content-Style-Type" content="text/css">
    <SCRIPT type="text/javascript" src="example.js"></SCRIPT>
    <STYLE type="text/css" >
      @import url(example.css);
    </STYLE>
  </HEAD>
  <BODY>
    <SPAN class="header">Example Page</SPAN>
    <HR>
    <FORM action="" name="exampleForm">
    <TABLE cellspacing="0" cellpadding="0" width="100%">
      <TR>
      <TD class="menu-body">
        <TABLE>
          <TR>
            <TD id="menu-part-1"
              class="menu-selected"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="clickMenu('1')"
              title="Click here to show the first part">
            First&nbsp;part
            </TD>
          </TR>
          <TR>
            <TD id="menu-part-2"
              class="menu-ordinary"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="clickMenu('2')"
              title="Click here to show the second part">
            Second&nbsp;part
            </TD>
          </TR>
          <TR>
            <TD id="menu-finish"
              class="menu-ordinary"
              onMouseOver="hoverMenu(this)"
              onMouseOut="hoverMenu(this)"
              onClick="submitForm()"
              title="Click here when all parts have been completed">
            Finish
            </TD>
          </TR>
        </TABLE>
      </TD>
      <TD class="form-body">
        <TABLE id="form-part-1" class="form-visible">
          <TR>
            <TD class="label">
              First&nbsp;Input&nbsp;Field
            </TD>
            <TD>
              <INPUT type="text" name="input_part_1" width="20">
            </TD>
            <TD class="comment">
              Fill in a value here - any value other than "111" will be rejected
            </TD>
          </TR>
        </TABLE>
        <TABLE id="form-part-2" class="form-hidden">
          <TR>
            <TD class="label">
              Second&nbsp;Input&nbsp;Field
            </TD>
            <TD>
              <INPUT type="text" name="input_part_2" width="20">
            </TD>
            <TD class="comment">
              Fill in a value here - any value other than "222" will be rejected
            </TD>
          </TR>
        </TABLE>
        <TABLE id="form-finish" class="form-hidden">
          <TR>
            <TD class="comment">
              The form has been submitted for processing, thank you.
            </TD>
          </TR>
        </TABLE>
      </TD>
      </TR>
    </TABLE>
    </FORM>
  </BODY>
</HTML>

CSS file example.css

BODY {
    color: black;
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
    background-color: rgb(181,199,221);
    background-image: none;
}

INPUT {
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: medium;
    background-color: rgb(240,244,249);
}

.header {
    color: rgb(71,108,154);
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: x-large;
}

.label {
    color: black;
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: medium;
}

.comment {
    color: black;
    font-family: sans-serif;
    font-style: italic;
    font-weight: normal;
    font-size: medium;
}

.menu-ordinary {
    color: rgb(71,108,154);
    background-color: rgb(193,212,238);
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: medium;
    border-top: thin solid rgb(71,108,154);
    border-left: thin solid rgb(71,108,154);
    border-right: thin solid rgb(71,108,154);
    border-bottom: thin solid rgb(71,108,154);
    border-spacing: 0px;
    margin: 5px;
    padding: 5px;
}

.menu-selected {
    color: blue;
    background-color: rgb(193,212,238);
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: medium;
    border-top: thin solid rgb(71,108,154);
    border-left: thin solid rgb(71,108,154);
    border-right: thin solid rgb(71,108,154);
    border-bottom: thin solid rgb(71,108,154);
    border-spacing: 0px;
    margin: 5px;
    padding: 5px;
}

.menu-highlight {
    color: lime;
    background-color: rgb(193,212,238);
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: medium;
    border-top: thin solid rgb(71,108,154);
    border-left: thin solid rgb(71,108,154);
    border-right: thin solid rgb(71,108,154);
    border-bottom: thin solid rgb(71,108,154);
    border-spacing: 0px;
    margin: 5px;
    padding: 5px;
}

.form-hidden      {
    display: none;
}

.form-visible {
    display: block;
}

.menu-body {
    background-color: rgb(216,232,252);
    border-top: thin solid rgb(71,108,154);
    border-left: thin solid rgb(71,108,154);
    border-right: thin solid rgb(71,108,154);
    border-bottom: thin solid rgb(71,108,154);
    border-spacing: 0px;
    margin: 0px;
    padding: 5px;
}

.form-body {
    background-color: rgb(216,232,252);
    border-top: thin solid rgb(71,108,154);
    border-left: 0;
    border-right: thin solid rgb(71,108,154);
    border-bottom: thin solid rgb(71,108,154);
    border-spacing: 0px;
    margin: 0px;
    padding: 5px;
}


Javascript file example.js

var currentPart = "1";
var submitDone = false;

function hoverMenu( anObject )
{
  if ( ( anObject.className == "menu-selected" )
       ||
       ( currentPart == "finish" ) )
  {
    return;
  }

  if ( anObject.className == "menu-ordinary" )
  {
    anObject.className = "menu-highlight";
  }
  else
  {
    anObject.className = "menu-ordinary";
  }

  return;
}

function clickMenu( part )
{
  var anObject;

  if ( ( part == currentPart ) || ( currentPart == "finish" ) )
  {
    return;
  }

  anObject = document.getElementById( "menu-part-" + currentPart );

  if ( anObject != null )
  {
    anObject.className = "menu-ordinary";
  }

  anObject = document.getElementById( "menu-part-" + part );

  if ( anObject != null )
  {
    anObject.className = "menu-selected";
  }

  anObject = document.getElementById( "form-part-" + currentPart );

  if ( anObject != null )
  {
    anObject.className = "form-hidden";
  }

  anObject = document.getElementById( "form-part-" + part );

  if ( anObject != null )
  {
    anObject.className = "form-visible";
  }

  currentPart = part;

  return;
}

function submitForm()
{
  var anObject;

  if ( document.exampleForm.input_part_1.value != "111" )
  {
    alert( "The first input value must be 111" );
    clickMenu( "1" );
    document.exampleForm.input_part_1.select();
    document.exampleForm.input_part_1.focus();
    return;
  }

  if ( document.exampleForm.input_part_2.value != "222" )
  {
    alert( "The second input value must be 222" );
    clickMenu( "2" );
    document.exampleForm.input_part_2.select();
    document.exampleForm.input_part_2.focus();
    return;
  }

  if ( submitDone )
  {
    alert( "The form has already been finished" );
    return;
  }

  anObject = document.getElementById( "menu-part-" + currentPart );

  if ( anObject != null )
  {
    anObject.className = "menu-ordinary";
  }

  anObject = document.getElementById( "menu-finish" );

  if ( anObject != null )
  {
    anObject.className = "menu-selected";
  }

  anObject = document.getElementById( "form-part-" + currentPart );

  if ( anObject != null )
  {
    anObject.className = "form-hidden";
  }

  anObject = document.getElementById( "form-finish" );

  if ( anObject != null )
  {
    anObject.className = "form-visible";
  }

  currentPart = "finish";

  submitDone = true;

  // submit() commented out because the form action is ""
  // document.exampleForm.submit();

  return;
}
0
 
LVL 27

Assisted Solution

by:caterham_www
caterham_www earned 100 total points
ID: 12328238
Hi,


Error: End tag for head which is not finished...
Your <TITLE> is missing
--> insert <TITLE>xyz</TITLE> between <head> and </head>
Error in line 13: you can't use <span> here, use <P class="header">Example Page</P>
Use <span> only within block-elements like p, div, td, h1...

Error in line 57: <INPUT type="text" name="input_part_1" width="20">
the attribut width is not a valid attribut. Use CSS-Stylesheets or size="20" instead of width.


Bob
0
 

Author Comment

by:tinybear
ID: 12331455
Thanks for that,

I forgot about the fact that TITLE must be there.

Ive solved the initial problem regarding IE6 not working with the W3C validator upload

Its due to XP Sp2 security restrictions for MIME sniffing and can be easliy solved by looking at the follwing answer http://www.experts-exchange.com/Web/Browser_Issues/Q_21169481.html#12327238

0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now