?
Solved

Safari ems and pixels

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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
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... …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

770 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