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