Solved

Safari ems and pixels

Posted on 2010-08-25
2
293 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

728 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