HTML5 + CSS and setting the width of <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 HTML-line does exactly what I want it to do. However, the first html-line (< header >) does not.

I'm using Firefox 3.6.8. In firebug the markup for both html-line 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 this?

Answer 1

Firefox 3.6 (there's no Firefox 3.8 as far as I know) does not have a User Agent stylesheet that recognizes the header elements as block level elements, so as with all unknown elements it is displayed as an inline element.

Adding in this line should do the trick:

display: block; 

Make sure that you use a HTML5 reset so that these elements display correctly for older browsers that do not recognize these new elements as block level elements, like:

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

Answer 2

If you need to use HTML5 elements like header and It needs to work in older browsers like ie 6, 7 & 8. Than in addition to adding display: block; to the elements, you may have to use a javascript workaround that targets ie.

Here is an example from communitymx.com that does this for a several HTML5 elements:

<!--[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]-->

Source: Making HTML5 work in IE6, IE7 & IE8

You may want to replace <!--[if IE]> with <!--[if lt IE 9]> if ie9 supports the elements the way you need it to.