www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to standardize font-size in both IE & Firefox?

  1. #1
    Join Date
    Jul 2007
    Posts
    1

    Post How to standardize font-size in both IE & Firefox?

    Hi all..need some help here.

    I'm having some problems solving the font-size differences at both IE and Firefox browser by viewing it with wide-screen resolution.


    As you can see, the font-size at Firefox is way more smaller than viewing at IE. Font in IE is bigger and in bold.

    But when I view it with CRT monitor, it didn't appear any font-size differences at both browsers.


    How should I standardize the font-size between these two browsers? Is it because the resolution affect the font-size or it's just because of the different browser?

    Please refer to the respective website --> www.niix.com/V2
    Thanks for helping!

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    font sizes vary for different browsers. A font-size of 1.0em might be 14-pixels on one browser, and 14.5-pixels on another browser. A standardization needs to occur. Basically, 'zero-ing' the default sizes of everything, and re-stating the desired size.
    I have been having good luck using this:
    * {padding:0; margin:0;}
    p {font-size: 100%; line-height:1.0em; margin:16px 0 10px 0;}
    html, body {min-height:100%; height:101%; padding-bottom:25px;
    font:x-small Arial, Verdana, sans-serif;
    voice-family: "\"}\"";voice-family:inherit;
    font-size:small;/*for IE 5.5 */}
    html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
    font-size: small; voice-family: "\"}\"";
    voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

    h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;
    font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
    h1{font-size: 1.93em;}
    h2{font-size: 1.72em;}
    h3{font-size: 1.52em;}
    h4{font-size: 1.42em;}
    h5{font-size: 1.32em;}
    h6{font-size: 1.21em;}
    It is not perfect, but it is alot closer than nothing at all.
    Note that I use the universal selector method to strip margins & paddings out. These are different on all browsers also. Change to "zero" and re-state to be 'the same' for every browser.

    Of course, -a user can change their prefered default CSS so as to read the page in the fonts and sizes that they prefer.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles