CODEWITHSUNDEEP
htmlinternet-explorer-8
Anthony
Anthony

Reputation: 2416

HTML5 shiv breaks page in ie8

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!

Upvotes: 1

Views: 2512

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47685

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

Upvotes: 2

Related Questions