IE 8 Automatically Closing <header> tag
- by djthoms
Background
I am currently working on the final QA of a responsive website and I'm having an issue with IE 8 and IE 7. My client deals with government contracting so their website needs to be compatible with IE 8 and IE 7. I am using Modernizr with html5shiv built in. I am loading Modernizr in the footer of a WordPress theme that was custom built for this project. I'm not missing a doctype or any other obvious code.
I am using the following scripts, all of which are loaded in the footer of WordPress:
jQuery 1.10.1
Modernizr 2.6.3 (click for config)
respond.js 1.3.0
superfish
jQuery Waypoints 2.0.3
jQuery Waypoints Sticky 2.0.3
The Situation
I'm having an issue with IE 8 automatically closing a <header> tag. First, I have used two utilities to check this issue:
IETester
IE 11 emulated to IE 8 w/ IE 8 User agent
Here is the correct output
<div class="wrapper main-header">
<header class="container">
<div class="sixteen columns alpha omega">
<div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
<div class="wrapper main-navigation desktop">
<nav id="nav" class="six columns alpha omega">
...
</nav>
<div class="eight columns alpha omega overlay" style="display: none;">
...
</div>
<div class="two columns alpha omega menu-ss">
...
</div>
</div><!-- .wrapper.main-navigation -->
</div><!-- /.sixteen.columns -->
</header><!--/header-->
</div><!-- /.main-header -->
What IE 8 is rendering:
<div class="wrapper main-header">
<header class="container"></header>
<div class="sixteen columns alpha omega">
<div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
<div class="wrapper main-navigation desktop">
<nav id="nav" class="six columns alpha omega">
...
</nav>
<div class="eight columns alpha omega overlay" style="display: none;">
...
</div>
<div class="two columns alpha omega menu-ss">
...
</div>
</div><!-- .wrapper.main-navigation -->
</div><!-- /.sixteen.columns -->
</header><//header><!--/header-->
</div><!-- /.main-header -->
What I have Tried
Loading html5shiv with IE conditional in the <head>
Loading Modernizr in the <head>
I have looked at these Stackoverflow questions/answers:
html 5 tags foorter or header in ie 8 and ie 7
html5 not rendering header tags in ie
IE 8 self closing tags automatically
Any assistance with this is greatly appreciated! I would really really really like to finish this website over the weekend. I've been banging my head against a wall for the past few hours over this issue.
Update
Here are some images from browsershack to cut out the emulation. I tested the site virtually with Windows 7 and WIndows XP (IE 8 & IE 7). http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1
