SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
-
Jan 9, 2003, 14:47 #1
- 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.
-
Jan 9, 2003, 15:45 #2
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.
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; }
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();">
Last edited by vgarcia; Jan 9, 2003 at 15:48.
Bookmarks