Menu
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:
I'm having an issue with IE 8 automatically closing a <header> tag. First, I have used two utilities to check this issue:
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 -->
<head>
<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.
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
667
Fixed the issue by moving Modernizr, jQuery, and respond.js to the <head> of the DOM. Thanks for all the assistance!
170
One thing I noticed is the <nav> element, which isnt supported in IE8.. so it makes sense that you would have to move any shims and such in the header.
Thought this might be good information as to why.
W3C
The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.
Another article of interest, (Story of the HTML5 Shiv) by Paul Irish that states "the new elements cannot hold children and are unaffected by CSS", which could be why tags become self closing. Be interested if anyone can elaborate on if this is the culprit.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
