23

html5 new elements (header, nav, footer, ..) not working in IE

dragonfly
  • 3,203
  • 7
  • 30
  • 52

7 Answers7

59

You need to include the HTML5 shiv script in order to allow styling of HTML5 elements in older IE browsers: http://code.google.com/p/html5shiv/

To use, include the following script in your element above your CSS:

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
cameronjonesweb
  • 2,435
  • 3
  • 25
  • 37
mVChr
  • 49,587
  • 11
  • 107
  • 104
  • 1
    shim? shiv? what is going on here? – Michael Dillon Mar 17 '11 at 04:51
  • 5
    @Michael Dillon - technically, it's a shim, but it became known as a the "html5 shiv" after the term was accidentally coined by John Resig (http://paulirish.com/2011/the-history-of-the-html5-shiv/) – keithjgrant Aug 08 '11 at 23:43
  • 1
    Thanks for the help, saved my life :) However, the original code.google source says "for the sake of performance, it would make better sense to include the CSS first then this script" – army Sep 20 '12 at 19:42
13

You need to use HTML5 Shim. Here is a detailed explanation as to why this is needed.

To use HTML5 Shim, you just need to add the following within your page's <head> above all your CSS declarations:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Chris
  • 44,602
  • 16
  • 137
  • 156
Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
10

Another option is to use Modernizr, which includes the HTML5 Shiv and also provides HTML5 feature detection.

HTML 5 elements in IE Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS. you’ll also probably want to set many of these elements to display:block; see the HTML5 Boilerplate CSS for an example. As of Modernizr 1.5, this script is identical to what is used in the popular html5shim/html5shiv library. Both also enable printability of HTML5 elements in IE6-8, though you might want to try out the performance hit if you have over 100kb of css.

Supported browsers We support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, we support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile and whilst we’re still doing more testing we believe we support Blackberry 6+. ~ http://modernizr.com/docs/#html5inie

The following tags at least: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

David d C e Freitas
  • 7,481
  • 4
  • 58
  • 67
mpdonadio
  • 2,891
  • 3
  • 35
  • 54
2

Use HTML5shiv.js or write javascript code in HTML Conditional comments.

<!--this condition is only for IE 8 and lesser browsers.-->

<!--[if lte IE 8]> //  means LESS THAN & EQUAL TO IE8. 

<script>
document.createElement('header'); 
document.createElement('nav'); 
document.createElement('article');
document.createElement('section'); 
document.createElement('aside'); 
document.createElement('footer');
</script>
<style> 
header, nav, article, section, aside, footer{ display:block; } 
</style>

// Now these elements will support in IE8 and lesser browsers.

Or visit this page https://tutorial.techaltum.com/html4-vs-html5.html

Avinash Malhotra
  • 596
  • 7
  • 8
0

Update - newer versions of IE do support HTML5 structural elements with the exception of the newer 'main' element. Using a CSS reset that includes the 'main' element such as normalize will fix this. Or you can just add the following CSS to your project:

    main { display: block;}
jbs
  • 495
  • 4
  • 7
0

If you don't care about a little bit code-overhead just use inner DIVs for styling.

This sections can not be styled via CSS with IE<9 (no HTML5-support). Even if you put a class-attribute inside the section-tag.

<section class="section outer">
    <h1>Level1</h1>
    some text
    <section class="section inner">
        <h1>Level2</h1>
        some more text
    </section>
</section>

Thats because IE<9 is killing the nesting for unknown tags. The DOM looks crazy like this:

 <section class="section outer"></section>
 <h1>Level1</h1>
 some text
 <section class="section inner"></section>
 <h1>Level2</h1>
 some more text
 </section><//section>
 </section><//section>

But you can use DIVs as an IE<9-Fallback, if you don't like to use javascript shim's. Instead of styling the SECTIONs, just style the inner DIVs.

<section>
    <div class="section outer">
        <h1>Level1</h1>
        some text
        <section>
            <div class="section inner">
                <h1>Level2</h1>
                some more text
            </div>
        </section>
    </div>
</section>

So you have modern surrounding HTML5-tags for SEO and all the styling is done by the DIVs for every browser as usual. It's full valid HTML5 and still works if javascript is disabled.

SammieFox
  • 554
  • 1
  • 6
  • 4
-1

Use the script given below...it will help you..

For each new element you want IE < 9 to recognise..add as below:

document.createElement("article"); (within script tag)
document.createElement("footer"); (within script tag)


Thank you

Neethu
  • 1
  • 1