Question

I am a beginner at html5. When I try to call the html5 shiv the page wont render in ie8. Only the background loads.

I am adding the following

<header>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">     </script><![endif]-->   
<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('hgroup');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
   </script>

css:

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; }

Please help!

Answer 1

1. You don’t have to create all the elements with document.createElement – shiv does it for you.
2. In your CSS you make all the new elements inline for IE8, however they’re naturally block in the good browsers. Try to make them consistent and use the rules from Normalize CSS for example:

    /*
    * Corrects `block` display not defined in IE 8/9.
    */

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

    /*
    * Corrects `inline-block` display not defined in IE 8/9.
    */

    audio,
    canvas,
    video {
        display: inline-block;
    }

    /*
    * Prevents modern browsers from displaying `audio` without controls.
    * Remove excess height in iOS 5 devices.
    */

    audio:not([controls]) {
        display: none;
        height: 0;
    }