Jump to content

section affects font size?

Recommended Posts

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.


Edited by farse

Share this post

Link to post
Share on other sites

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 by dsonesuk

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...