[quote some url on the web]Macs render text at a screen resolution of 72 pixels per inch (ppi) ... Windows renders type at a notional screen resolution of 96 ppi... the difference between 96 ppi and 72 ppi (24 pixels) makes the fonts on a Web page look 33 percent larger when viewed on a Windows machine.[/quote]
To compensate, there are some very simple CSS rules that you can use to essentially "reset" the text size to be consistent across both Mac and Windows.
Code:
<style type="text/css">
html>body { font-size: 16px; }
body { font-size: 100%; }
</style>
<!--[if gt IE 6.9999]>
<style type="text/css">
html>body { font-size: 100%; }
</style>
<![endif]-->
Initially the
html>body definition is applied to all browsers that understand the child selector CSS. This will result in setting the font-size on Opera, Firefox, Netscape, IE7, Safari (and other "modern" browsers). It will not be applied to older versions of IE - they will ignore this definition.
Next, the
body definition is set for all browsers that didn't understand the initial definition. Because this definition has lower specificity than the initial definition, it is ignored by the likes of Opera, Firefox, Netscape, IE7 and Safari... but older versions of IE will get this font-size definition.
Finally a conditional comment (which is specific to Windows IE) delivers an override to the initial style by setting the font-size back from a fixed pixel value to a scaleable value for all "new" versions of IE... specifically IE7. It needs to be
html>body to ensure it doesn't have a lower specificity than the initial definition.
This code can be re-written using more IE specific conditional comments - but it doesn't make the code any more transparent to do so.
Now, whether you specify your element's font size in pixels, points or ems, you can be confident that text will look the same across browsers on Mac and Windows.
Enjoy
![[smile] [smile] [smile]](/data/assets/smilies/smile.gif)