Why do my h1 tags have different font sizes in the browsers when they both possess the identical rules?
<div class="one">
<h1>Hello</h1>
</div>
<h1 class="two">Hello</h1>
body {
background:#fff;
font-family:Trebuchet MS, Arial, Tahoma, sans-serif;
font-size:14px;
letter-spacing:1px;
color:#000;
}
.one {
font-size: 40px;
}
.two {
font-size: 40px;
}
An <h1> tag does not inherit its size from a parent <div>.
The first <h1> is not described in css, so the font-family and font-size rendered depend on the browser’s (user’s) default font settings.
The second <h1> tag should render the same size in both browsers, although it might appear to differ if the default font-family is different.
The above statements assume that both browsers have no “zoom” applied.
If the browsers are on different computers, then screen pixel density is a factor, too.
Honestly I’m not really understanding at this point. I just can’t wrap my head around the fact that the first h1 tag, that is nested within a div, is larger than the h1 tag that isn’t. Sure, I can get around it by applying zoom:2 property to it, but before It comes to that I wish to understand why I am getting this result. Keep in mind I am working locally using the lastest version of chrome.
Brandon, can you post the full code for the test page including the doctype and head, etc? Also, name the browsers and list the default font settings in both.
No problem sir.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>><html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script scr="js/less.js"></script>
<link rel="stylesheet" href="css/mastersheet.css">
</head>
<body>
<div class="nested">
<h1>Hello World</h1>
</div>
<h1 class="not-nested">Hello World</h1>
<!-- le google analytics -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.js"><\\/script>')</script>
<!-- le javascript -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
@import url("normalize.css");
.nested {
font-size: 40px;
}
.not-nested {
font-size: 40px;
}
Using the latest version of chrome as well as normalize as a reset ( deleted h1 defaults in my reset )
Defaults for chrome ( User agent stylesheet ):
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
h1 {
margin: 0.67em 0;
}
You would need this:
.nested [COLOR="#FF0000"]h1[/COLOR] {
font-size: 40px;
}
.not-nested {
font-size: 40px;
}
Otherwise, the browser has its own default size for the h1 that is more specific and thus will apply.
The <h1> element is assigned its size in "em"s. ems are a relational unit of measure that is based on its immediate parent, not a fixed unit of measure. (your first example didn’t indicate the ems assigned to h1 
)
In your new example:
The outer container div.nested has a font size of 40px assigned.
When nested, the 2ems assigned to the h1 element doubles the parent font-size so <h1> renders as if it were 80px.
There was a good discussion here a few days ago that might shed more light on ems:
For some reason I still am unable to wrap my head around this. How can I grasp this concept?
You could try equating ems to percent. 2ems would be the same as 200% of the parent font size. (That was mentioned in the thread.)
I feel for you because I’ve been in similar situations before where understanding a concept eluded me.
I’m not sure what else to suggest other than more reading and experimentation.
Perhaps you can describe the “disconnect” and perhaps another poster might have another way of explaining the font size relationship that rings a bell with you. Keep at it… it WILL sink in.
My disconnect is that I keep referencing the “cascade” with this issue. For some reason I keep thinking that if I would have applied a certain font size to the parent element, in my case “.nested”, then every other element that is nested within the parent, would inherit that property as well. That is where the confusion lies at the moment. If that were the case my font size would be 40px, but it’s not. Why is the nested h1 doubling in size? Can I override the default browser h1 rule? Why or Why not? Does this quirk only apply to em’s? 
Let’s give this a try…
The outer div.nested has been assigned a font-size of 40px.
All <h1>s have been assigned a font-size of 2em.
As far as the inner <h1> is concerned, it sees its parent container, div.nested, as 1em; ie. 40px = 1em to the inner <h1> (remember ems are relative units… proportional to their parent). Because the inner <h1> is assigned a font-size of 2em, it doubles the font-size of its parent container and renders 80px. That is the inheritance effect at work; and yes, that is the awkward but expected behavior of ems and percent units of measure.
h1 has been assigned a font-size of 2em. h1.nested has been assigned a fixed font-size of 40px.
h1.nested is more specific than just h1 alone and thus, overrides the 2em assignment. That is the specificity effect.
How did we do this time?
Ron has explained it very well above but perhaps another explanation won’t hurt.
ems are based on the font-size of the parent (whatever that may be). As far as font sizes are concerned then em and % are the same thing and interchangeable.
If you say font-size:2em or font-size:200% then that element will have 200% the font-size of the parent.
My disconnect is that I keep referencing the "cascade" with this issue. For some reason I keep thinking that if I would have applied a certain font size to the parent element, in my case ".nested", [B]then every other element that is nested within the parent, would inherit that property as well[/B]
An element will only inherit certain properties (not all properties are inherited) and will inherit those properties only when no more specific rules apply.
Browsers have a default stylesheet that set the size of certain elements by default (heading tags for example) and to over-ride these you have to be more specific and apply your rules to those elements directly. That’s the reason that Reset and [URL=“http://necolas.github.com/normalize.css/”]normalise style sheets have been invented in order to start all browsers on a level playing field as they all have different defaults.
Setting font-size to a div is probably not a good thing to do as you most likely won’t want all the elements in a div to have that font-size except for special cases of limited content ( e.g most divs will contains headings, paragraphs, lists, form elements etc and you would not want then all to be the same size. Usually you would target the elements more specifically and set thee size of the heading tags and p elements etc directly).
I usually set the body font-size of the page to the most commonly used font in that page which is usually the size for the readable text content and that saves a few rules as you then only need to define the differences but you still do need to take into account the browsers default stylesheet for certain elements.
You have to imagine that the browsers stylesheet is sitting at the top of the page and so any rules in that stylesheet will affect your layout. Here is en example of a default stylesheet but browsers all differ on the finer details which is why most “resets” set up a standard base stylesheet to begin with.
I just had my “AH-HA!” moment. I finally figured it out after 2 days. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Learning this just changed my entire mood for the day. Ahh, the joys of learning. Many thanks to all of you for taking the time to assist me.