Make HTML5 header work with IE — HTML5 Shiv doesn’

Question

I posted the other day about problems I was having with my layout in IE.

Today I figured out my problem, IE was not working for my HTML5 elements like <header> and <footer>

When I replaced them with <div> almost all my problems went away. So I started searching for how to add IE suppot for these HTML5 features.

I came across Modernizr and HTML5 Shiv also from what I read, the basic Javascript to add support for something like <header> is this...

document.createElement("header");

Now you can see I have done my research and I am still not having any luck. Modernizr did not work so then I tried the HTML Shiv trick and still no luck so then on to the Javascript trick and no luck either.

So please can someone tell me what I can do?

My IE version is 8 and sorry I do not have a live version of the site to show

Answer 1

Those scripts will make the new elements work in IE but their display style is still missing. Add the following css which I copy pasted from html5boilerplate.com:

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }