Firefox 3.6 section rendering issue

Question

I am working on fixing a display bug in a friend's webpage on Firefox 3.6. It displays correctly in all other browsers. I have narrowed the problem down to this: in most browsers, the HTML is generated and parsed as so:

<section class="sidebar" style="height: 1106px; "><div class="sidebar-widget"><h3     class="sidebar-widget-title">Shopping Cart</h3><div id="sliding_cart" class="shopping-cart-wrapper">
    <p class="empty">
        Your shopping cart is empty<br>
        <a target="_parent" href="https://underwateraudio.com/products-page/" class="visitshop" title="Visit Shop">Visit the shop</a>   
    </p>

</div> </div></section>

<section id="main-content"> ... </section>

However, in Firefox 3.6, the page displays as if the line </div> </div> </section> was not there at all. I looked at it in Firebug and indeed Firefox is taking out that end tag for some reason. I can't figure out why Firefox 3.6 is stripping out this tag.

If you want to see the page itself, look at https://underwateraudio.com/underwater-audio-faq/. The home page looks fine but all other pages (reached by clicking on the top bar) are broken.

Answer 1

Your sample does not match your page.

The problem is that you have insufficient </div> tags. Inside the section with class="sidebar", there's three div start tags

 <div class="sidebar-widget">
 <div id="sliding-cart">
 <div class="wpsc_cart_loading">

but only two end div tags and then the end section tag.

In this situation, modern browsers like Firefox 4 and later follow the HTML5 parsing rules. The relevant one says that when the parser encounters:

An end tag whose tag name is one of: "address", "article", "aside", "blockquote", "button", "center", "details", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "listing", "menu", "nav", "ol", "pre", "section", "summary", "ul"

If the stack of open elements does not have an element in scope with the same tag name as that of the token, then this is a parse error; ignore the token.

Otherwise, run these steps:

1. Generate implied end tags.

2. If the current node is not an element with the same tag name as that of the token, then this is a parse error.

3. Pop elements from the stack of open elements until an element with the same tag name as the token has been popped from the stack.

Step 1 has no effect in this case. Step 2 just indicates that something is wrong, but step 3 says infer that there should have been a </div> tag there and then match the </section> tag with its start tag. That's why your page is treated as OK by other browsers.

But Firefox 3.x pre-dates the HTML5 parsing algorithm, which means that you are at the mercy of whatever error recovery the browser had in place. You might get lucky, you might not. In this case the missing end div tag causes Firefox to discard the </section> tag because it was not expecting it.

Answer 2

Based on some quick reseach, it doesn't look like Firefox gained support for <section> until FF4.

https://developer.mozilla.org/en/HTML/Element/section

Maybe using the HTML5Shim (targeting the older FF) would help to correct this issue?

http://code.google.com/p/html5shim/