title: Problems styling HTML5 semantic elements such as <section>, <nav> and <article>
body: <p>So I'm working on some HTML5 code using HAML and SASS. </p>
  
  <p>I currently have a DIV with id "restaurant-info"</p>
  
  <p>HAML:</p>
  
  <pre><code>#restaurant-info
    %header#restaurant-header
      %h2 Bob's Country Bunker
    %nav#restaurant-tabs
    ...etc...
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>#restaurant-info {
    background: #F00;
  }
  </code></pre>
  
  <p>In Firefox this is creating the following HTML:</p>
  
  <pre><code>&lt;div id='restaurant-info'&gt;
    &lt;header id='restaurant-header'&gt;
      &lt;h2&gt;Bob's Country Bunker&lt;/h2&gt;
    &lt;nav id='restaurant-tabs'&gt;
      ...etc...
  </code></pre>
  
  <p>This block is correctly styled in the browser with a red (#F00) background. If I inspect the section element, I see this:</p>
  
  <pre><code>#content #restaurant-info {
    -moz-border-radius:5px 5px 5px 5px;
    background:none repeat scroll 0 0 #FF0000;
    margin-top:20px;
    overflow:hidden;
  }
  </code></pre>
  
  <p>However, when I change that DIV to a section, like so:</p>
  
  <pre><code>%section#restaurant-info
    %header#restaurant-header
      %h2 Bob's Country Bunker
    %nav#restaurant-tabs
    ...etc...
  </code></pre>
  
  <p>In Firefox this now results in the following markup:</p>
  
  <pre><code>&lt;section id='restaurant-info'&gt;
    &lt;header id='restaurant-header'&gt;
      &lt;h2&gt;Bob's Country Bunker&lt;/h2&gt;
    &lt;nav id='restaurant-tabs'&gt;
      ...etc...
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>#content #restaurant-info {
    -moz-border-radius:5px 5px 5px 5px;
    background:none repeat scroll 0 0 #FF0000;
    margin-top:20px;
    overflow:hidden;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>The only conclusion I can draw is that this is a very specific bug. Anyone have any other ideas?</p>