CODEWITHSUNDEEP
htmlfirefoxgoogle-chrome
CppLearner
CppLearner

Reputation: 17040

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

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.

enter image description here

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

Upvotes: 5

Views: 7639

Answers (3)

Dennis
Dennis

Reputation: 11

It's not the rendering of a H1 in a nested section that makes the H2 bigger... it's just that browser manufacturers think/agreed, that beneath web editors, producers and developers the h2 is commonly treated as the visual more important heading! Nothing about outline rendering here!

See my example here: http://pastebin.com/yJ1vzEjj

For IE8 is NOT doing it, is just showing that these convention just hasnt arrived at Microsoft headquarters yet... again its a BUG, not a FEATURE :-)

Good luck!

Upvotes: 1

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

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

Upvotes: 21

Rob
Rob

Reputation: 15160

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

Upvotes: 2

Related Questions