I have a header and footer that I am testing for a website I will be working on. The header and footer look great in every browser except IE. I am using skeleton ( http://www.getskeleton.com/ ) grid for responsive which has support for IE, yet I can not find the problem. Here is a link to a test page I have created: http://kennyalvarez.com/bs/
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<link rel="stylesheet" href="stylesheets/base.css" />
<link rel="stylesheet" href="stylesheets/skeleton.css" />
<link rel="stylesheet" href="stylesheets/layout.css" />
</head>
<body>
<!-- Primary Page Layout================================================== -->
<div id="head" class="row">
<header class="container-twelve">
<p id="" class="six columns alpha"><a href="#">My Site</a></p>
<ul class="six columns omega">
<li>
<button id="searchbtn" name="search">Search</button>
</li>
<li>
<form action="#search" method="post">
<input id="search" placeholder="search" type="text" name="search">
</form>
</li>
<li><a href="contact.html">Contact</a></li>
<li>
<a id=login href="#">Login</a>
<form id=loginform action="" method="post">
<input class="required" id="username" placeholder="Username" type="text" name="username">
<input class="required" id="password" placeholder="Password" type="text" name="password">
<div id=captcha>
<img src="http://placehold.it/100x30" alt="title">
</div>
<input class="required" id="captchainput" placeholder="Captcha" type="text" name="captchainput">
<a href="#">Forgot Login?</a> <a href="#">Register</a>
<button id="loginbtn" type="button" name="login">Login</button>
</form>
</li>
<li><a href="#">Glossary</a></li>
</ul>
</header>
</div><!--head-->
<div id=fullpage>
<nav>
<div class="container-twelve">
<a href="#">PAGE</a>
<a href="#">PAGE</a>
<a href="#">PAGE</a>
<a href="#">PAGE</a>
<a href="#">PAGE & PAGE</a>
<a href="#">PAGE</a>
<a href="#">PAGE & PAGE</a>
</div>
</nav>
<ul id="subnav">
<div class="container-twelve">
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
<li><a href="#">PAGE</a></li>
</ul>
</li>
<li><a href="#"> PAGE</a>
<ul>
<li><a href="#">PAGE</a></li>
</ul>
</li>
</div>
</ul>
<div id="content">
<h1>TEST</h1>
</div><!--content-->
</div><!--fullpage-->
<div id="foot">
<footer class="container-twelve">
<div class="twelve columns">
<div id="fnav" class="six columns alpha omega">
<a href="#">Terms of Use</a>
<a href="#">Sitemap</a>
<a href="#">Glossary</a>
<a href="#">Login</a>
<a href="#">Contact Us</a>
</div>
<div class="four columns alpha omega">
<p><a href="index.html">MY SITE</a></p>
<p class="copy">Copyright 2012 © All rights reserved.</p>
</div>
</div><!--fourteen-columns-->
</footer>
</div><!--foot-->
</body>
</html>
Internet Explorer 8 does not support HTML5 elements like
headerandfooter. You will need to either replace these elements with divs, or use a javascript polyfill like this: http://www.paulund.co.uk/turn-on-html5-in-ie8-or-lower