Another Version of the problem:
When I set the body’s font to 16px, and the p’s font (which controls the content’s text size) to 100%, the fonts are different size across browsers.
Here’s my CSS for any interested parties…
http://www.commentarius.org/wordpress/wp-content/themes/classic-pyrrhus/style.css
Try not using percentage values for font-size. I’ve had the best cross-browser results using px for font sizes.
Actually that is incorrect CSS.
You should use either % or em values for all fonts. The difference you are seeing could well be the way the individual browser is configured to display code. Most (FF certainly – i don’t use others) have the option to set a minimum font size and name – whether serif or sans-serif – independent of a pages CSS. If a browser is set to display a minimum font size of 12 = no matter what size your CSS says to display, your browser will display it as 12px. By using % or em values your browser will display your browsers selected font size at the correct percentage of that and render it as you wanted it.
Actually that is incorrect CSS.
It is valid css, but is not encouraged because IE browsers won’t resize fixed width fonts. However, IE7 now has a page zoom feature. Using a relative font size requires a parent font size and some extra cross browser css.
Yes – it is valid CSS, for that part, but for the reasons i stated it is frowned upon in CSS circles. You are correct, though, that it IS valid CSS.
It’s also true that users can use the scrollwheel+CTRL buttons on their mouse – if they have one – to regulate text view, but that is really a workaround that many either are unfamiliar with, or is something that really should not be used to fix incorrect code.
But note that your link DOES confirm my position on font sizing, though:)
Thanks for the responses.
For the font in question, I think I managed not to mix controlling it with ems and %s – ems are used elsewhere for the template’s standard font.
Even when I set font with just a fixed px size (e.g. 16px), the font seemed to be different sizes on mac and pc machines, even when using firefox for a browser on both machines (on my pc machine, firefox had imported my IE settings, on my mac machine, firefox had likely imported safari settings – but all had default text size of 16). I’m a little confused if that is normal or not. Is it?
I eventually gave up trying to “fix” the inconsistency, and chose a font where the difference in size was minimal (but not zero) – Times New Roman. I’ll probably just stick with that unless someone has a suggestion. Thanks again.
