Make HTML5 Header Work With IE - HTML5 Shiv Doesn't Fix My Layout

Question

I sent the other day the problems that I had with my location in IE.

Today I realized my problem, IE did not work for my HTML5 elements like <header> and <footer>

When I replaced them with <div> , all my problems disappeared. So I started looking 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 for adding support for something like <header> is ...

 document.createElement("header"); 

Now you can see that I have done my research, and I'm still out of luck. Modernizr did not work, so I tried the Shiv HTML trick and still have no luck, so the Javascript trick was not lucky.

So please someone tell me what can I do?

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

Answer 1

These scripts will make new elements work in IE, but their display style is still missing. Add the following css, which I copied 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; }