HTML5 + CSS and setting the width <HEADER>

Question

I got the following css:

div#header, header { 
    height: 88px; 
    width: 100%; 
    background-image: url('/images/header.jpg'); 
    background-repeat:no-repeat; 
}

And the following HTML:

<header></header>
<div id="header"></div>

The second line of HTML does exactly what I want to do. However, the first html line (<header>) does not.

I am using Firefox 3.6.8. In firebug, the markup for both html lines looks exactly the same. In Internet Explorer, I have the same problem. Only Chrome displays the code as expected.

I'm pretty confused right now. How to fix it?

Answer 1

Firefox 3.6 does not have a User Agent style sheet that recognizes elements headeras block-level elements, since it displays as an inline element with all unknown elements.

:

display: block; 

, HTML5 reset, , , :

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

Answer 2

HTML5, header, , , 6, 7 8. display: block; , , javascript, , .

communitymx.com, HTML5:

<!--[if IE]>
  <script type="text/javascript">
  (function(){
    var html5elmeents = "address|article|aside|audio|
        canvas|command|datalist|details|dialog|
        figure|figcaption|footer|header|hgroup|
        keygen|mark|meter|menu|nav|progress|
        ruby|section|time|video".split('|');

      for(var i = 0; i < html5elmeents.length; i++){
            document.createElement(html5elmeents[i]);
        }
    }
  )();
  </script>
<![endif]-->

: HTML5 IE6, IE7 IE8

<!--[if IE]> <!--[if lt IE 9]>, ie9 , .