Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Size of <h> tags - in IE and FF

    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:


    IE6:

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Cuz IE is stupid and FF does it right.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!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.
    Last edited by _Aerospace_Eng_; 09-28-2007 at 07:24 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    24
    Thanks
    4
    Thanked 1 Time in 1 Post
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by CaptainB View Post
    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.
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •