<h1> is smaller than <h2> in firefox and chrome

Question

The latest updated code is here: http://pastebin.com/TJweMgtL

Starting from the left, IE 8, Chrome, Firefox 5.. you can see that only IE8 can display h1 and h2 elements correctly.

What do you guys think? What is causing issue? Did I have any mismatch tags? Thanks!

---

EDIT H1 and H2 are okay in HTML4. I am guessing that it's a browser issue?

---

New update

I removed most of the unnecessary codes, and only left what is relevant to the question. Thanks for the helps in advance!

The latest updated code is here: http://pastebin.com/TJweMgtL

Answer 1

In HTML5, an <h1> inside sections nested n levels deep is treated like <h(n+1)> instead. So an <h1> inside a single <section> is semantically equivalent to an <h2> and is rendered as such. In this context "sections" means any of <section>, <article>, <nav>, or <aside>. Looking at your code, the "test-again (now small)" header is inside an article which is inside a section, so it's the same as an <h3>. Which is smaller than the <h2> of course.

Firefox and Chrome implement this part of HTML5. IE doesn't seem to yet.

See the example at http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections and the style rules at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#sections-and-headings

Answer 2

Validate your html and css for those lists of errors. I just copied the raw code and came up with some pretty goofy stuff.