Problems styling HTML5 semantic elements such as <section>, <nav> and <article>

Question

So I'm working on some HTML5 code using HAML and SASS.

I currently have a DIV with id "restaurant-info"

HAML:

#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

SASS:

#restaurant-info {
  background: #F00;
}

In Firefox this is creating the following HTML:

<div id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

This block is correctly styled in the browser with a red (#F00) background. If I inspect the section element, I see this:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px;
  overflow:hidden;
}

However, when I change that DIV to a section, like so:

%section#restaurant-info
  %header#restaurant-header
    %h2 Bob's Country Bunker
  %nav#restaurant-tabs
  ...etc...

In Firefox this now results in the following markup:

<section id='restaurant-info'>
  <header id='restaurant-header'>
    <h2>Bob's Country Bunker</h2>
  <nav id='restaurant-tabs'>
    ...etc...

However, the section loses it's background color entirely. However, when I go to inspect the section element in Firefox, it is correctly styled the exact same as before:

#content #restaurant-info {
  -moz-border-radius:5px 5px 5px 5px;
  background:none repeat scroll 0 0 #FF0000;
  margin-top:20px;
  overflow:hidden;
}

Why does simply changing a correctly styled DIV (that is identified only by only its ID in CSS) to a SECTION element break the styling in Firefox 3.6.10? I went through the "inspect element" for every possible piece and Firefox tells me that the computed background color is #FF0000, but it's not showing me that. This doesn't appear to be a problem in Safari 5.0.2.

The only conclusion I can draw is that this is a very specific bug. Anyone have any other ideas?

Answer 1

Yeah, looks like you’ve found a Firefox bug there. I get the same behaviour as you in Firefox 3.6.10, but in Chrome 6, everything’s dandy. (Both on the Mac.)

Very odd. The HTML validates just fine.

Update: I am an idiot, Ian Devlin isn’t.

Answer 2

You need to add display:block to all block level HTML5 elements:

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

None of them have default CSS styling in most browsers, and unknown elements are treated as inline in Firefox.