I’m having some strange validation errors for my website. I’ve gone through my html multiple times but I just can’t seem to find the culprit. You can view the w3 validation here;
Here is my HTML
<!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">
<head>
<!--[if IE 9]>
<style>
li {
}
</style>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/Stylesheets.js"> </script>
<title>CTEC1801: Austria Fact Page</title>
<link rel="stylesheet" type="text/css" href="css/contact.css" />
<link rel="stylesheet" type="text/css" href="css/style_austria.css" title="Style_One" />
<link rel="stylesheet" type="text/css" href="css/style_austria2.css" title="Style_Two" />
<link rel="stylesheet" type="text/css" href="css/style_austria3.css" title="Style_Three"/>
<script type="text/javascript">
//<![CDATA[
var name = ".stylechange";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div class="stylechange">
Choose a style:
<a href="#" onclick="setActiveStyle('Style_One')">- Style One</a>
<a href="#" onclick="setActiveStyle('Style_Two')">- Style Two</a>
<a href="#" onclick="setActiveStyle('Style_Three')">- Style Three</a>
</div>
<div id="nav">
<a href="explanation.html" class="home">Explanation Page</a>
<a href="#" class="austria">Austria</a>
<a href="#" class="switzerland">Switzerland</a>
</div><br />
<div id="logo"> <a href="http://www.roamintl.com/wp-content/uploads/2011/07/austria.jpg"><img src="images/austrian_logo.jpg" alt="Austrian Logo" width="940" height="350" /></a></div>
<div id="content-left">
<h1 id="top">Random facts of the day!</h1>
<h2>Capital of Austria</h2>
<ul>
<li>Veanna</li>
</ul>
<h2>Total Area of Austria</h2>
<ul>
<li>Total: 83,870 sq km</li>
<li>Land: 82,444 sq km </li>
<li>Water: 1,426 sq km </li>
</ul>
<h2>Population of Austria</h2>
<ul>
<li>8,419,000 million and counting </li>
</ul>
<h2>Languages of Austria</h2>
<ul>
<li>German (official nationwide) </li>
<li>Slovene (official in Carinthia) </li>
<li> Croatian (official in Burgenland </li>
<li> Hungarian (official in Burgenland) </li>
</ul>
<h2>Life Expectancy in Austria</h2>
<ul>
<li>Total population: 78.92 years </li>
<li>Male: 76.03 years </li>
<li>Female: 81.96 years (2005 est.) </li>
</ul>
<h2 class="right">history and Heritage</h2>
<ul class="right">
<li>The Austrian flag is one of the oldest in the world </li>
<li>They hold the worlds largest emerald </li>
<li>The sewing machine was invented here </li>
</ul> <br /><br />
<h2 class="right">Land and Nature</h2>
<ul class="right">
<li>62% of Austria is covered by the Alps </li>
<li>Holds the tallest waterfall in Europe </li>
<li>One fourth of the population of Austria lives in the Capital </li>
</ul>
<h2 class="right">Business and Economy</h2>
<ul class="right">
<li>Austria has the second lowest unemployement rate </li>
<li>Among Europeans, Austrians work the longest with the average of 45 hours a week </li>
<li>Over 60% of Austria's electricity is supplied by a renewable source </li>
</ul>
</div>
<div id="contact">
<h1>Contact us</h1>
<div id="contact-form" class="clearfix">
<h2>Please fill in the details below as needed.</h2>
<form method="post" action="http://www.elizabethcastro.com/html6ed/examples/forms/showform.php">
<div class="form_name">* Name:</div>
<input type="text" id="name" name="name" value=""/>
<div class="form_name">* Email Address:</div>
<input type="text" id="email" name="email" value="" />
<div class="form_name">* Message:</div>
<textarea id="message" name="message" cols="1" rows="1"></textarea>
<div class="form_required">* indicates a required field </div>
<input type="submit" value="Submit" id="submit-button" />
<input type="reset" value="Reset" id="reset-button" />
</form>
</div>
</div>
</div>
</body>
</html>
In XHTML 1.0 Strict, the form tag cannot contain input and textarea elements as direct children. To be valid XHTML, the input tag must be wrapped by another block-level element, such as
<p>or<fieldset>. Is there any reason you can’t use XHTML transitional or HTML5 docyptes?For more info on XHTML strict and the form element, see http://xhtml.com/en/xhtml/reference/form/