[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Safari ems and pixels

Posted on 2010-08-25
2
Medium Priority
?
302 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 44

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 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

650 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