IE 8 Automatically Closing <header> tag

Posted by djthoms on Stack Overflow See other posts from Stack Overflow or by djthoms
Published on 2013-11-08T23:49:51Z Indexed on 2013/11/13 3:54 UTC
Read the original article Hit count: 182

Filed under:

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:

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

Developer IT