...

View Full Version : Size of <h> tags - in IE and FF



CaptainB
09-28-2007, 04:54 PM
Hi!

how come that there is such a big difference in the size of the <h> tags in IE and FF?

Example: The <h5> tag was used in this example:

Firefox:
http://img524.imageshack.us/img524/3246/firefoxhg5.jpg

IE6:
http://img410.imageshack.us/img410/6779/ieqz3.jpg

Fumigator
09-28-2007, 05:17 PM
Cuz IE is stupid and FF does it right.

_Aerospace_Eng_
09-28-2007, 06:18 PM
The <h#></h#> elements don't go by the font size set in the body. You need to explicitly set the font size of these or they will vary vastly among the different browsers. Here is an example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:0.9em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#setsize h1 {
font-size:300%;
}
#setsize h2 {
font-size:260%;
}
#setsize h3 {
font-size:220%;
}
#setsize h4 {
font-size:180%;
}
#setsize h5 {
font-size:140%;
}
#setsize h6 {
font-size:100%;
}
</style>
</head>
<body>
<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>
<h5>Test</h5>
<h6>Test</h6>
<div id="setsize">
<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>
<h5>Test</h5>
<h6>Test</h6>
</div>
</body>
</html>

The <h#></h#> elements in the div with id="setsize" will look the same in all of the browsers given that the specified font family is available to the system.

felgall
09-28-2007, 07:37 PM
If you set the sizes you want for all the tags in your stylesheet you have a lot more control over the size of everything (unless your visitor overrides it in their stylesheet).

bDare
09-28-2007, 11:15 PM
Using CSS is definitely the way to go on this. Browsers have different specifications on how large fonts are sizes are. With CSS you can define this strictly.

CaptainB
09-29-2007, 03:25 PM
Thanks all for your replies. I use to set the size of the different <h#> tags in my CSS, I just wondered why there was such a big difference in the browsers. :thumbsup:

felgall
09-29-2007, 08:51 PM
Thanks all for your replies. I use to set the size of the different <h#> tags in my CSS, I just wondered why there was such a big difference in the browsers. :thumbsup:

Because the standards define that an <h#> tag defines a heading but doesn't say how that heading should look and so the browser writers got to decide for themselves how they thought it should look.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum