Problems styling HTML5 semantic elements such as <section>, <nav> and <article>
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.开发者_JS百科 Anyone have any other ideas?
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.
精彩评论