Solved

Safari ems and pixels

Posted on 2010-08-25
2
288 Views
Last Modified: 2012-05-10
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
Comment
Question by:WillAyers
2 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 33527426
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
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 33527439
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

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question