HTML5 not rendering header tags in IE

Question

So i am using a static site generator called Bonsai that uses a few codependencies like handlebars, tilt and liquid templating. now following best practices i am building it on HTML5. i have tested the format extensively on chrome and firefox and opera. saving the worst for last IE.

first before those who are going to give the obvious solutions, i have included html5shiv in the head and i have set in css:

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

i would like to have IE 8 and 9 support really i dont care much for the older ones. now the header does not render at all, when looking at the console in IE9 i can see that there is nothing even being put through. i thought that it was becasue it was trying to pull the shiv file from an online source so i downloaded the html5shiv.js file and linked it in the head and called it as follows:

  <!--[if lte IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->

  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

and nothing still so just as a test i broke the if statement by removing the 9 in the above link. when refreshing the page it now displays the header block with this above it

<!--[if lt IE ]> <![endif]-->

if i make the if statement look for IE and not a specific version it dosent render and if i specify the version it doesnt render, if i remove the if statement and just call the html5shiv.js file in the head it doesnt render. its only rendered if i break the if statement?? sorry if this is a noobish question this is my first attempt at HTML5 what am i missing??

EDIT:

so yeah you can go see the site its here. sorry Ian i stackoverflow comments renders the http:// so it is there it just didnt show it in the comment.

i have tried

 <!--[if IE ]> <![endif]-->  //all versions of IE
 <!--[if lt IE 9]> <![endif]-->  //all versions of IE before 9
 <!--[if lte IE 9 ]> <![endif]--> // version 9 of IE

none are working.. and all my HTML is pretty strait up.. well before it complies this is what it looks like

<header>
  {% include "shared/nav" %}
</header>

the nav that i am referencing to in the above looks like this

<nav id="navigation">
  <div id="nav_div_home" class="nav_buttons"><a id="nav_home" class="left_nav" href="/">Home</a></div>
  <div id="nav_div_system" class="nav_buttons"><a id="nav_system" class="left_nav" href="/systems/">Systems</a></div>
  <div id="nav_div_studies" class="nav_buttons"><a id="nav_studies" class="left_nav" href="/studies/">Studies</a></div>
  <img id="nav_logo" src="/images/logo3.png" alt="Mpowered logo">
  <div id="nav_div_approach" class="nav_buttons"><a id="nav_approach" class="right_nav" href="/approach/">Approach</a></div>
  <div id="nav_div_about" class="nav_buttons"><a id="nav_about" class="right_nav" href="/about/">About</a></div>
  <div id="nav_div_contact" class="nav_buttons"><a id="nav_contact" class="right_nav" href="/contact/">Contact</a></div>
</nav>

and then the only CSS that i run on the #navigation tag is

#navigation {
 height: 150px;
 padding-top: 60px;
 margin: 0px auto;
 width: 960px;

}

but i cant see how that would break the header tag??

Answer 1

In addition to my comment above, you don't need the html5shiv for IE9, which I'm sure you know.

Chances are there are some HTML problems elsewhere as IE doesn't try and fix things for you the way other browsers do.

The reason that <!--[if lt IE ]> <![endif]--> doesn't work is that you need to remove the lt so that it simply reads <!--[if IE]> <![endif]-->

Based on your reply above regarding the JS file, I'd try:

<!--[if lte IE 9]><script src="js/html5shiv.js"></script> <![endif]-->

And

<!--[if IE]><script src="html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

is wrong. You need to have the http:// in front of the html5shiv.

A link to the website in question would be ideal.

UPDATE I see what's wrong now, you're missing a doctype! Add:

<!doctype html>

to the top of the file and it will be fine.

If no doctype is specified, IE always resorts to Quirks mode (which you never want!)

You also have multiple <head> elements which is wrong. And everything needs to be enclosed in a <html> element.

Actually there's a lot wrong with the markup, you don't even have a <body> element!

Answer 2

If fact, simply create the elements without even add it to the DOM will allow IE (even 6) to recognize it. So

<script type="text/javascript">
   document.createElement("'header'");
   document.createElement("'nav'");
   document.createElement("'article'");
   document.createElement("'section'");
   document.createElement("'footer'");
 </script>

will solve your problem. You can reduce it to

'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})

found here: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html