section affects font size?

[farse]

I'm adopting HTML5 and decided trying to apply it in one of my existing sites would be a good way to learn how it behaves. I am attaching a file that behaves in a way that I am trying to understand. I have excised all irrelevant code. It is an interactive site written in php.

 

As you will see if you open the page in a browser, the HTML5 section element seems to reduce the size of my text as opposed to div. I have played with this for several hours trying unsuccessfully to figure out what's going on. Can anyone offer a reason or even a hypothesis?

 

Incidentally, if you exchange main and section, all three lines are reduced so it is definitely the section element.

test.php

Edited July 27, 2015 by farse

[dsonesuk]

Looks like browser styling in firefox

h2, *:-moz-any(article, aside, nav, section) h1 {    display: block;    font-size: 1.5em;    font-weight: bold;    margin: 0.83em 0;}

Any h1 within article, aside, nav, section the font-size is set to 1.5em compared to default of 2em

h1 {    display: block;    font-size: 2em;    font-weight: bold;    margin: 0.67em 0;}

Note: id attribute value should be unique within page, you have two.

Edited July 27, 2015 by dsonesuk

[COBOLdinosaur]

If the sizing is critical then you should use a reset stylesheet to override the user user agent stylesheets because each browser has its own setting. so you just load your own rules for what you consider critical and override the browser settings.

 

You can find any number of reset strategies and reset stylesheets by Googling CSS Reset