XHTML Validation - Strict

From TNG_Wiki
Jump to navigation Jump to search


XHTML 1.0 Strict Validation



The following are additional XHTML validation errors when using the validator at http://w3.org/ either directly or through the FireFox Web Developer extension, to validate for XHTML 1.0 Strict

Error Invalid Parameter Corrected parameter Action
there is no attribute "align" <div align="center"> <div class="center">

Define a class .center {

text-align: center; } and define the table with margin-right: auto; and margin-left: auto; and a fixed width
there is no attribute "width" <td width="170" valign="top" class="fieldnameback"> <td class="fieldnameback"> Add width: 170px and vertical-align:top to the CSS class
there is no attribute "vspace" <img src="template4/ArrowDown.gif" width="25" height="8" vspace="4" border="0" align="left" alt="" /> <img src="template4/ArrowDown.gif" class="arrow" alt="" />

Replace with margin-top: 4px; and margin-bottom: 4px; in CSS class, for example .arrow { float: left; margin-top: 4px; margin-bottom: 4px; width: 25px; height: 8px; border: 0px;

}
there is no attribute "hspace" <img src="tng_names.gif" width="20" height="20" border="0" hspace="4" style="vertical-align:middle" align="left" alt="" /> <img src="tng_names.gif" width="20" height="20" border="0" hspace="4" style="vertical-align:middle" align="left" alt="" />

Replace with margin-left: 4px; and margin-right: 4px; in CSS class, for example .tnggif { float: left; margin-left: 4px; margin-right: 4px; width: 20px; height: 20px; border: 0px; vertical-align: middle;

}
there is no attribute "border" border="0" is not valid in <img statement Remove border="0" Use border: none; in a CSS class for the image
there is no attribute "align" align="left" is not valid in <img statement Remove align="left" Use float: left; in a CSS class for the image if necessary (The default is to align to the left, so it should not be required)
there is no attribute "hspace" hspace="4" Remove hspace="4" Use margin-left: 4px; and margin-right: 4px; in a CSS class for the image
there is no attribute "target"

target="_self"

target="_blank"

Remove target="_self"

Remove target="_blank"
Change URLs with target="_blank" to use open.window javascript
there is no attribute "bgcolor". bgcolor="#008080" Replace with background-color: ="#008080

Replace with style="background-color: #008080" or

Add background-color: #008080; to a CSS class

there is no attribute "color"

element "font" undefined
<font color="#ffffff"> Remove <font color="#ffffff"> Add font information to a CSS class
there is no attribute "clear" <br clear="all"/> Remove clear="all" from <br />

Replace with <br class="clear"> where .clear {

   clear : both;

}

defined in the CSS
there is no attribute "height" <td height="4" valign="top">   Use height: 4px; in a CSS class
there is no attribute "align" <table width="150" align="right">   Use text-align: right; in a CSS class
element "center" undefined <center>

.center { text-align: center; } .tablespace { margin-left: auto; margin-right:auto; width: 780;

}

Define a class .center {

text-align: center; } and define the table with margin-right: auto; and margin-left: auto; and a fixed width

there is no attribute "size" there is no attribute "face"

element "font" undefined.
<font size="1" face="arial,helvetica">

.class { font-size: 12px; font-family: Arial, Helvetica;

}

Replace <font with font-size: 12px;

font-family: Arial, Helvetica: in a CSS class
document type does not allow element "a" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. <a href="searchform.php"> coded within form move <form> statement after <a href="searchform.php">

Move the <a href= link before the form

there is no attribute "name"

<form action="search.php" method="get" name="form1">

<script type="text/javascript"> document. form1.myfirstname.focus();

</script>

<form action="search.php" method="get" id="form1">

<script type="text/javascript"> document.forms['form1'].myfirstname.focus();

</script>

Use id= instead of name= in form statement If both name= and id= are specified, remove the name=

If javascript code is used to access the form by name, you must also update the javascript to use document.forms[‘id’]

document type does not allow element "select" here

<select name="newlanguage1" id="newlanguage1" style="font-size: 10px;" onchange="document.tngmenu1.submit();">

<option value="1" selected="selected">English</option>

<div><select name="newlanguage1" id="newlanguage1" style="font-size: 10px;" onchange="document.tngmenu1.submit();">

<option value="1" selected="selected">English</option>

Add <div> in front of <select statement

The form-element cannot have inline elements, like select, as direct child.
document type does not allow element "input" here <input type="hidden" name="instance" value="1" /></form> <input type="hidden" name="instance" value="1" /></div></form>

Add </div> after <input statement and before </form>

The form-element cannot have inline elements, like input, as direct child.
there is no attribute "width" <td width="90%"> <td> Remove width= from <td> statements
document type does not allow element "br" here <br / > add style="margin-top: 10px; margin-bottom: 10px" to the table

<br /> is not valid outside of a table as a way of providing spacing.

Add style="margin-top: 10px; margin-bottom: 10px" to the table definition or add the margins to a CSS class

Related Links