html5 new layout elements old browsers

Question

I have my site ( http://www.rohanjain.in) based on html5. It uses the new elements defined in html5 for page layout: header, nav, section, article, footer etc. But I just checked that with old browsers and ie (dont care about this "non" browser) dont render the page properly.

Snapshot:

The css markup (source of css at http://www.rohanjain.in/media/css/style.src.css) is not being followed maybe because it does not recognize the tags.

Currently for old browsers visitors are redirected to this and for ie this page.

Could not find a proper solution to this. Is there any workaround so that the page can be rendered properly and with html5?

Answer 1

Use the HTML 5 remy sharp script to document.createElement them:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

http://work.arounds.org/issue/19/styling-html-5-elements-ie/

Also you have to declare display:block for all the HTML5 block level elements manually:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block
}

Answer 2

Have you looked at HTML5Shiv?