New block-level elements vs. Gecko

While working on examples for the "Degrade Gracefullly" principle, I  
realized that the Gecko handling of unknown elements makes it pretty  
hard to do graceful degradation for new block-level elements. I  
thought initially that just adding a "display: block" style rule would  
cut it, and that does work as expected in Safari and Opera.

However, in Firefox, the open tags of known block-level elements force  
unknown elements to be closed. This results in elements like <article>  
or <section> being siblings of their intended block children, rather  
than their parents, which makes it difficult to apply styling or event  

Here's a simple example:

<!DOCTYPE html>
article { display: block; }
.blogpost { border: 1px solid black; }
<article class="blogpost">
<h2>My article</h2>
<p>This is an article.</p>

Safari and Opera put a border around the article, but Firefox does  
not, since the <h2> and <p> end up as siblings instead of children of  

It might be possible to handle this using script to fix up the DOM,  
but there's no marker indicating where the <article> should have  
ended, so it would require adding some special element at the end  
inside every use of a block-level element, or else some messing around  
with ids or classes.

Since Firefox seems to have a reasonably fast uptake rate for new  
versions, it would help a lot if the parsing of unknown elements were  
changed to allow block-level elements, well in advance of widespread  
adoption of HTML5.

This has apparently been filed already as < 
 >. Can any Mozilla representatives in this group comment on whether  
it's possible to fix this for Firefox 3 or otherwise relatively soon?


Note: handling of new block elements will be problematic in IE as well  
for other reasons. I'm writing a separate email about that.

Received on Sunday, 16 September 2007 06:01:33 UTC