html5 error using IE8

Question

I'm having trouble with ie8 using html5 and Css3 (I think).

With Firefox and Chrome it works perfectly.

When I try to open the website using ie8 all my header put into my body....

css

 .main-header {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
     letter-spacing: 2px;
     color: #000;
     white-space: nowrap;
     padding: 10px;
     background-color: #FFF;
     background-position: right top;
     border-bottom: 1px solid #000000;
     background: url(/images/header_bg.png);
 }

 .main-header2{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #000;
    white-space: nowrap;
    padding: 10px;
    background-color: #FFF;
    background-position: right top;
    border-bottom: 1px solid #000000;
    background: url(/images/header_bg.png);
 }


 .main-headertmp {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #000000;
   letter-spacing: 4px;
   white-space: nowrap;
   margin-bottom: 1px;
   border-bottom: 4px solid #4571d4;
   background-color: #FFFFFF;
   background: url(/images/header_bg.jpg);
  }

 html,
 body {
    margin:0;
    padding:0;
    height:100%;
 }

 #content {
  padding:10px;
  padding-bottom:80px; /* Height of the footer element */
 }

  #container {
    min-height:100%;
    position:relative;
    height:100%;
  }

 #header {
         background-color: #FFF;
         background-position: right top;
         border-bottom: 1px solid #C64934;
         background: url(../images/header_bg.png);
  }

  #body {
    padding:10px;
    padding-bottom: 60px;   /* Height of the footer */
    color : #333;
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
 }

 #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background-color: #FFFFFF;
    background: #F1F3F5;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
 }

index header ->script

    <!--[if lt IE 9]>
      <script src="/javascript/modernzr.js">
        document.createElement(\'container\');
        document.createElement(\'header\');
        document.createElement(\'body\');
        document.createElement(\'footer\');
      </script>
    <![endif]-->

those element are using on divs.

 <div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
 </div>

someone could help me ?

thank you.

Answer 1

you cannot include a script with both a src and a text inside the block, so you need to include two different script blocks. Also backslashes are not needed, so use this code instead

<!--[if lt IE 9]>
  <script>
    document.createElement('container'); 
    document.createElement('header');
    document.createElement('footer');
  </script>
  <script src="/javascript/modernzr.js"> </script>
<![endif]-->

Note: in HTML5 there's no a container element (yet?) defined on the language specs: maybe you wanted to create a main element instead.