| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 2 of 2
-
Jan 9, 2003, 14:47 #1Your Lord and Master, Foamy
- 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☆★☆★
- Join Date
- Jan 2002
- Location
- in transition
- Posts
- 21,235
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Re: Cross-Browser Font Size Adaptation.
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: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.
Or you can do this in JS: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; }
Hope this helps!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