Weird DOM inconsistency HTML5 (Firefox / Webkit)

Hey guys I could use some help on this issue.

Looking at a page I developed as part of a Wordpress theme I am writing and I noticed now as I decided to check the page on Firefox that the DOM is all screwed up. I can’t see why the same page, with the same source, would have 2 completely different looking DOM’s and FF’s just looks wrong. It might have something to do with the HTML5 elements I am using, but I am using HTML5 Boilerplate that includes Modernizr and I am talking about the latest FF here! Let me show you what I mean.

In Webkit (Chrome 8.0) it shows the DOM as intended:


+ div
|+ section
||+ hgroup
|||-h2
|||-h3
||+ article
||+ article
||+ article

The same page in Firefox (3.6.12) shows up like this (the last 2 articles are outside the section):


+ div
|+ section
||+ hgroup
|||-h2
|||-h3
||+ article
|+ article
|+ article

Is this a browser issue? It can’t be THAT bad at parsing a DOM, its the latest version of a major browser! Is there something I’ve done to cause this? How can the same source markup be interpreted differently like this?

Refer to this link to see the page with the issue: hosted locally so hopefully my machine is on

The issue is also occurring on other pages as well but this one makes it pretty clear.

UPDATE:

sorry for wasting ur time this was a pretty dumb mistake, i was missing a closing </p> tag, webkit seems to patch that up for you and firefox has an issue because of the malformed html. SORRY!

The long paragraph in each article is lacking a closing </p> tag, thus causing Firefox to choke.

<p>It’s official – I’m adding Sigiri to my NYC favorites list!
Serving Sri Lankan cuisine, Sigiri stands out among the throng
of Indian restaurants… </p>

EDIT: ah, I see you found it. I should have refreshed first. :slight_smile: