As shown in the screen captures the hmtl file passes.
Here is the modified html text used to pass:
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8">
<title>Wonders of Nature | Earthquakes </title>
<link href="css/main2.css" rel="stylesheet">
<link href="css/flexslider.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 721 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<div id="header_inner" class="group">
<div id="logo">
<h1>Wonders of Nature</h1>
</div><!--END logo-->
<nav class="group">
<a href="#" id="pull"><img src="images/pulldownsymbol.png" alt="pulldownsymbol"></a>
<ul class="group">
<li><a href="index.html">Home</a></li>
<li><a href="thecause.html">The Cause</a></li>
<li><a href="richterscale.html">Richter Scale</a></li>
<li><a href="outcome.html">The Outcome</a></li>
</ul>
</nav>
</div><!--END header_inner-->
</header>
<section id="main_content">
<!-- SlidesJS Required: Start Slides -->
<div class="flexslider">
<ul class="slides">
<li>
<a href="thecause.html"><img src="images/home_pg_img1.png" alt="cause"></a>
</li>
<li>
<a href="richterscale.html"><img src="images/seismograph.png" alt="seismograph"></a>
</li>
<li>
<a href="outcome.html"><img src="images/theoutcome.png" alt="outcome"></a>
</li>
</ul>
</div>
</section> <!--end main_content-->
</div>
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<footer> Glen Myers Wonders of Nature Earthquakes 2013 </footer>
</html>
Validating my css now:
At first there was 3 errors
| 242 | nav | Value Error : background attempt to find a semi-colon before the property name. add it |
| 406 | div.infoLLL | Value Error : margin-left Parse Error |
| 434 | .image_container | Value Error : margin-right Parse Error |
So I modified the css on these lines so the css would pass...
All it was was one semi colon missing on one line and two lines with 'Margin-left: ;' where I had forgot to delete it as I didnt need any value in there.
After these very small modifications the css passed.
