Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<style type="text/css">
*{margin:0;padding:0}
body{font:80% Verdana,Geneva,Arial,Helvetica,sans-serif;color:#000;background-color:#fff;}
#wrapper{background:#ffffff;width:60em;background-color:#E3D7C9;}
</style>
</head>
<body>
<div id="wrapper">here</div>
</body>
</html>
I have set the width to 60em yet Internet Explorer 6 measures it as 768px and FF equates to 764px. So there is a 4px difference?
Why is that?
You should not be making pixel perfect designs when using EMs (and shouldnt' really be making pixel perfect designs ever anyways), since people's font sizes and resolution vary considerably. Generally with EMs, people still often use either fixed with (in pixels), or full window width, for their main container, and only size the smaller interior containers with EMs.
There's another bug with IE (not sure if it's just v6 or not), in that in some cases (more advanced situations) widths/margins won't display properly in EMs unless you specify font-size:100% (or any percentage should work) in the body section of CSS.
One thing I noticed though, is that you used font-size:80% instead of font-size:100%. I see people do this so often, but it bugs me quite a bit. Realize that what it means is that you're taking the default font size of the browser that the user most likely set themselves (or they use the default because they like it's size), and then SHRINKING it to 80% of that. What's the point of shrinking the font size so that it's smaller than the user prefers?
font-size:80% can still be used... but not as a default in the body... should be used for cases where the text isn't as important and is intended to be smaller than the body text.
[edited by: Xapti at 10:03 pm (utc) on Mar. 26, 2008]
So, what's 80% of 16px? 12.8. Funnily enough, multiply that by 60 and you get 768. So why's Firefox the one in the wrong?
Try setting an 'absolute' font size for standards-compliant browsers. Use a whole number, like... 13px. Set (in a conditional comment) for IE 6 and 7 (so they can resize the text) the font size to be 81.25%. 81.25% of 16 is 13px. Check your dimensions again in all browsers. Same, no? Alternatively, do this (0.75 for 12px, 0.8125 for 13px, 0.875 for 14px) for whichever font size you choose. Just use a whole number -- and don't rely on browsers to have to calculate decimal points.
One thing I noticed though, is that you used font-size:80% instead of font-size:100%. I see people do this so often, but it bugs me quite a bit. Realize that what it means is that you're taking the default font size of the browser that the user most likely set themselves (or they use the default because they like it's size), and then SHRINKING it to 80% of that. What's the point of shrinking the font size so that it's smaller than the user prefers?
font-size:80% can still be used... but not as a default in the body... should be used for cases where the text isn't as important and is intended to be smaller than the body text.
The user most likely set themselves? Hardly. Most users don't even know they have the ability to click on View >> Text Size >> (Smallest ¦ Smaller ¦ Medium ¦ Larger ¦ Largest) -- let alone the ability to, by default, change their base font size in their browser. I do agree to an extent though: designers/developers tend to reduce the font size too much, usually to 11px. Readability at that stage becomes an issue, especially for those with eyesight problems. Lowest font size I would go is 12px.
If I'm running a 3 MegaPixel display, anyone setting even 16px as their set font size would piss me right off, because at high resolutions like that, 16px is pretty damn small. Conversely, people with those crappy 15" or 17" monitors which can only display 1024x768 (or for whatever reason are running even lower like 800x600), 16px may look too large for them. Why bother setting defaults, when you can rely on user preference?
I'm not going to get into some flame war about this. The OP was about consistent base font-sized layouts, and as far as I'm aware it's solved.
P.S. If you are going to use 100%, use 100.01%, as it resolves a bug in previous versions of Opera where it wouldn't round the pixel sizing properly.
So I am not sure if this inconsistency is really anything to worry about as it is only a few pixels?
the point is as soon as the user sets a preference as their default the calculation will alter, the em is based on the width of the letter "m" so is not only based on the actual base font size but also the base font-family, both of which can be overridden by a user pref (or the first font in your CSS list might not be available in the users system)
when designing with ems you shouldn't really get hung up on the pixel differences as that is what em designing/elastic layouts are about.
with things like zoom (ctrl++) taking off in usage it's simply more important that the layout scales with the text perhaps, no matter what your base CSS is suggesting.
Gecko rounds cumulatively, font-families may render slightly differently x-browser etc.. pixel perfection using percentages or ems should not fretted IMHO ;)
[edited by: SuzyUK at 10:51 am (utc) on Mar. 27, 2008]
Thanks for the advice though.
