SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Cross-Browser Font Size Adaptation.

    Okay, I have one for you javascript Gurus here.

    In Mozilla and Opera, the font's display one size lower than Internet Explorer. For instance, small in Mozilla is equivalent to IE's x-small font size.

    What I want to do is set my base font in IE to x-small and the base font size in everything else to small. Then I can use percentages to manage everything else so everyone can scale fonts to their needs. This should allow for roughly the same font size across browsers and operating systems.

    So in my CSS, I have added:

    BODY {
    font-size: small;
    }

    Now my question is, how can I change that to x-small based on the user utilizing IE 5+. I personally don't care about 4.X browsers at this time so backwards compatibility is not much of an issue.
    Wayne Luke
    ------------


  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    Re: Cross-Browser Font Size Adaptation.

    Originally posted by W. Luke
    Okay, I have one for you javascript Gurus here.

    In Mozilla and Opera, the font's display one size lower than Internet Explorer. For instance, small in Mozilla is equivalent to IE's x-small font size.

    What I want to do is set my base font in IE to x-small and the base font size in everything else to small. Then I can use percentages to manage everything else so everyone can scale fonts to their needs. This should allow for roughly the same font size across browsers and operating systems.

    So in my CSS, I have added:

    BODY {
    font-size: small;
    }

    Now my question is, how can I change that to x-small based on the user utilizing IE 5+. I personally don't care about 4.X browsers at this time so backwards compatibility is not much of an issue.
    Keep it all in the CSS, and use CSS2 (which IE has yet to understand) to set a small font size. Here's an example:
    Code:
    body {
     font-size: x-small;
    }
    /*this is the CSS2 that Moz and Opera should understand but IE won't*/
    html>body {
     font-size: small;
    }
    Or you can do this in JS:
    Code:
    <head>
    <script type="text/javascript">
    function loadFonts() {
    var bodies = document.getElementsByTagName('body');
    //check to see if we're using IE
    if(navigator.userAgent.indexOf('MSIE')==-1){
    //should only be one body, otherwise you have really
    //malformed HTML!
    bodies[0].style.fontSize = 'small';
    }else{
    bodies[0].style.fontSize = 'x-small';
    }
    }
    </script>
    </head>
    <body onload="loadFonts();">
    Hope this helps!
    Last edited by vgarcia; Jan 9, 2003 at 15:48.


Bookmarks

Posting Permissions

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