Sent by Gunlaug_Sørtun on 21 February 2005 00:12
Bruce MacKay wrote:
> I have a site in which the font is too small in Opera but OK in IE
> and Firefox. An example page is here...
>
> http://horticulture227.massey.ac.nz/testpage.htm
Basically it's because browsers don't agree on font-size, unless it's
100%, or px. They "tip over" at slightly different points on the
percentage and em scale, as all browsers will set the actual font-size
in pixels-- no matter what method we use.
The next problem with any "non-pixel" font-sizing method, is nesting.
The "tip-over" points becomes more and more unpredictable the deeper we
nest font-sizes. We may easily loose a couple of pixels in one browser,
compared to another browser.
If you only need a few nesting-levels, then starting out with 100% on
body, and carefully selecting percentage or em values on elements, will
get you around these browser-differences. Works well in most cases, if
you test and adjust values to "hit in the middle" across browser-land.
An alternative is to pixel-size fonts for Opera, Moz/FF, Safari and the
other browsers which can resize pixels, and feed IE/win suitable
percentages that ends up at the same size. We usually have to hack
IE/win anyway...
Just keep line-heights as percentage or unitless values, since pixels on
line-height is "frozen values" in some browsers.
Once you have chosen a method that suits you, be aware that visitors who
need larger fonts (like me), are able to force whatever font-size they
like onto a web page. That should cool down any attempt to feed the
flames around 'what's the best way to size fonts'.
I like fonts above 13px myself-- and test to 28px.
---------
BTW: your html>sidebar { /* Opera fix for above */ is targeting all
browsers, except IE/win...
A better one is:
@media Screen and (min-width: 0px){/*be even nicer to Opera*/
body {font-size: 16px; line-height: 130%;} /* get all versions in line */
....and whatever else you want to tell Opera 7.20+.
}
.... it will only work until other browsers catch up on mediaqueries
though, so I will not recommend it. But if you need it...
More here: http://www.gunlaug.no/contents/wd_1_02_01.html
....with this attached:
http://www.gunlaug.no/contents/styles/target-browser.css
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
