title: HTML5 not rendering header tags in IE
body: <p>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.</p>
  
  <p>first before those who are going to give the obvious solutions, i have included html5shiv in the head and i have set in css:</p>
  
  <pre><code>/* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>  &lt;!--[if lte IE 9]&gt;
      &lt;script src="/js/html5shiv.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  
    &lt;!--[if IE]&gt;
      &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;!--[if lt IE ]&gt; &lt;![endif]--&gt;
  </code></pre>
  
  <p>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??</p>
  
  <p>EDIT:</p>
  
  <p>so yeah you can go see the site its <a href="http://mpowered.site44.com" rel="nofollow">here</a>. sorry Ian i stackoverflow comments renders the http:// so it is there it just didnt show it in the comment.</p>
  
  <p>i have tried </p>
  
  <pre><code> &lt;!--[if IE ]&gt; &lt;![endif]--&gt;  //all versions of IE
   &lt;!--[if lt IE 9]&gt; &lt;![endif]--&gt;  //all versions of IE before 9
   &lt;!--[if lte IE 9 ]&gt; &lt;![endif]--&gt; // version 9 of IE
  </code></pre>
  
  <p>none are working.. and all my HTML is pretty strait up.. well before it complies this is what it looks like</p>
  
  <pre><code>&lt;header&gt;
    {% include "shared/nav" %}
  &lt;/header&gt;
  </code></pre>
  
  <p>the nav that i am referencing to in the above looks like this</p>
  
  <pre><code>&lt;nav id="navigation"&gt;
    &lt;div id="nav_div_home" class="nav_buttons"&gt;&lt;a id="nav_home" class="left_nav" href="/"&gt;Home&lt;/a&gt;&lt;/div&gt;
    &lt;div id="nav_div_system" class="nav_buttons"&gt;&lt;a id="nav_system" class="left_nav" href="/systems/"&gt;Systems&lt;/a&gt;&lt;/div&gt;
    &lt;div id="nav_div_studies" class="nav_buttons"&gt;&lt;a id="nav_studies" class="left_nav" href="/studies/"&gt;Studies&lt;/a&gt;&lt;/div&gt;
    &lt;img id="nav_logo" src="/images/logo3.png" alt="Mpowered logo"&gt;
    &lt;div id="nav_div_approach" class="nav_buttons"&gt;&lt;a id="nav_approach" class="right_nav" href="/approach/"&gt;Approach&lt;/a&gt;&lt;/div&gt;
    &lt;div id="nav_div_about" class="nav_buttons"&gt;&lt;a id="nav_about" class="right_nav" href="/about/"&gt;About&lt;/a&gt;&lt;/div&gt;
    &lt;div id="nav_div_contact" class="nav_buttons"&gt;&lt;a id="nav_contact" class="right_nav" href="/contact/"&gt;Contact&lt;/a&gt;&lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and then the only CSS that i run on the #navigation tag is</p>
  
  <pre><code>#navigation {
   height: 150px;
   padding-top: 60px;
   margin: 0px auto;
   width: 960px;
  
  }
  </code></pre>
  
  <p>but i cant see how that would break the header tag??</p>