• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

Safari ems and pixels

I was just doing some experimentation and was hoping someone could explain why the following is happening. If I define a css rule for a paragraph as .5em, my understanding is that all browsers will render this as 8px (since the default font size is 16px) but when I check the computed size by using Inspect Element I see the ocmputed size is 9px. In Firefox, it computes to 8px.
0
WillAyers
Asked:
WillAyers
1 Solution
 
Chris StanyonCommented:
Em's are relative measurements whereas pixels are absolute.

If you set a paragraph to 0.5em it will be relative to the font-size of the parent element (maybe a DIV, or even BODY.

It will also be dependent on the browsers individual defaults (which vary). To avoid this slight variation between browsers, try using a CSS reset file (http://meyerweb.com/eric/tools/css/reset/)

It's considered bad practice to hard code absolute font sizes into your web pages because visitors to your site may like the option of resizing to make your site more accessible.

The trick is to design a site that works even if the font size varies, so I wouldn't get too hung up on exact matches between browsers.
0
 
DesignbyonyxCommented:
All browsers render EMs differently.  They have different algorithms for calculation how wide an EM is... and such is the case that some browsers will render things a little differently.  And if a user has specified a different default font size in their browser settings, then everything gets knocked up/down accordiingly.  It's kind of a pain in the arse.

You only want to use EMs if you are not going for a pixel-perfect layout.  Otherwise, if you want things to show up EXACTLY the same in all browsers, use pixels.

Cheers.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now