So, I am working on HTML5 code using HAML and SASS.
I currently have a DIV with id "restaurant-info"
Haml:
#restaurant-info %header#restaurant-header %h2 Bob Country Bunker %nav#restaurant-tabs ...etc...
SASS:
#restaurant-info { background: #F00; }
In Firefox, this creates the following HTML:
<div id='restaurant-info'> <header id='restaurant-header'> <h2>Bob Country Bunker</h2> <nav id='restaurant-tabs'> ...etc...
This block is correctly designed in the browser with a red (# F00) background. If I inspect the section element, I see the following:
#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 this DIV to a partition, like this:
%section#restaurant-info %header#restaurant-header %h2 Bob Country Bunker %nav#restaurant-tabs ...etc...
In Firefox, this now leads to the following markup:
<section id='restaurant-info'> <header id='restaurant-header'> <h2>Bob Country Bunker</h2> <nav id='restaurant-tabs'> ...etc...
However, the section completely loses the background color. However, when I move on to inspecting a section element in Firefox, it is correctly styled exactly the 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 is it just changing the DIV (which is identified only by its identifier in CSS) so that the SECTION element breaks the style in Firefox 3.6.10? I looked at the “check item” for every possible part, and Firefox tells me that the calculated background color is # FF0000, but this does not show me that. This does not seem to be a problem in Safari 5.0.2.
The only conclusion I can make is that this is a very specific mistake. Does anyone have any other ideas?