Jump to content



Welcome to AstaHost - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  yordan : (19 June 2013 - 02:28 PM) Long Life To Asta New Era
@  agyat : (19 June 2013 - 01:58 PM) New Era Start At Asta Or Asta Start In New Era. :unsure:
@  yordan : (16 June 2013 - 05:41 PM) You're Welcome, Agyat!
@  agyat : (16 June 2013 - 07:38 AM) Thanks Yordan...
@  velma : (16 June 2013 - 12:06 AM) I Have Asked Opa To Check For A Backup.. He'll Let Me Know Soon :)
@  velma : (16 June 2013 - 12:05 AM) T_T It Seems That Someone Has Deleted That Topic Since I Found The Url Of The Topic But It Gives Me An Error
@  yordan : (15 June 2013 - 10:31 PM) @velma : It's A Tuto On How To Create A Login Program.
@  yordan : (15 June 2013 - 10:31 PM) Happy Birthday To Youuuuuu Agyat!
@  yordan : (15 June 2013 - 10:31 PM) Ba$
@  agyat : (15 June 2013 - 04:41 PM) :(
@  agyat : (15 June 2013 - 04:41 PM) Where The Hall I Were? 15Th Is Almost At End And No-One Wished Me "happy Birthday"!!!
@  velma : (14 June 2013 - 10:39 AM) Which Tutorial Is He Searching For?
@  velma : (14 June 2013 - 10:38 AM) Which Tutorial Is He Searching For?
@  yordan : (14 June 2013 - 07:47 AM) Ok, Have A Look Tomorrow.
@  yordan : (13 June 2013 - 03:19 PM) @velma, Can You Have A Look At Feelay's Problem? Seems That His Tutorial Is Not Searchable Today.
@  Feelay : (13 June 2013 - 08:11 AM) Oh, Haha
@  velma : (12 June 2013 - 05:39 PM) T_T Lately My Levels Of Procrastination..... **sigh**
@  velma : (12 June 2013 - 05:38 PM) I'll Do It Later
@  velma : (12 June 2013 - 05:38 PM) Procrastinators.. People Who Keep Saying "i'll Do This In A Bit"
@  Feelay : (12 June 2013 - 02:05 PM) Deal Punishments To What?

Replying to Sizes In Webdesign: Em Vs. Px


Post Options

    • Can't make it out? Click here to generate a new image

  or Cancel


Topic Summary

Sensational

Posted 21 July 2008 - 05:49 PM

Em vs px in modern browsers?

Sizes In Webdesign: Em Vs. Px
Hi there! Great article!

But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally?

Is the difference between ems and pxs still an issue?

Cheers!

-reply by EmFan


im guessing with certain browsers it will still be an issue because some browsers still wont zoom proportionally with pxs.. but with FF3 it does zoom proportionally with pxs so there is no difference between ems and pxs.. so it just depends what browser the user is viewing the webpage in!

Posted 02 July 2008 - 11:20 PM

Em vs px in modern browsers?
Sizes In Webdesign: Em Vs. Px

Hi there! Great article!

But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally?

Is the difference between ems and pxs still an issue?

Cheers!

-reply by EmFan

Posted 02 July 2008 - 11:18 PM

Em vs px in modern browsers?
Sizes In Webdesign: Em Vs. Px

Hi there! Great article!

But what about the latest browser editions such as FF3 which have some kind of new technique that zooms pages like "images" and where you can build your entire layout using px units and still have your page zoom proportionally?

Is the difference between ems and pxs still an issue?

Cheers!

-question by EmFan

FirefoxRocks

Posted 10 April 2008 - 11:33 PM

I've read this informative tutorial throughly and found that this is a valuable concept to designing in CSS. In addition to font sizes, margins and paddings can also be specified in the relative unit of em, and more rarely width, height, border and positioning selectors. With regards to using %, it actually takes the font size of the parent element if you are specifying the value as a font size.

As for specifying the page width to be 780px to accomodate the screen resolution of 800*600, I think that the idea is ok because most users screen resolutions are at 1024*768 up to 1280*1024. The layout shouldn't look too small in either of those layouts, with a width of 780px. And visually impaired users would probably set the screen to 800*600, which is perfect for the page. However the use of percents to set <body> width is still recommended as it is called "liquid design".

Thanks for writing this informative post, I'll be sure to use these techniques when updating my CSS.

Posted 27 January 2008 - 06:38 PM

Great information on this web page. Thanks !

TavoxPeru

Posted 27 October 2006 - 06:34 AM

Well, while i'm searching other information i just found this excellent topic, congrats, its very helpful and simple, so, i gonna implement it right now in a project that im working on.

Best regards,

Posted 15 November 2005 - 09:20 AM

Thank you for your clear and concise presentation of this topic. I will take note and begin implementing these suggestions immediately on my web sites.

derouge

Posted 10 November 2005 - 01:21 AM

Very neat .. I'm just getting into CSS so this might be useful. Thanks for the tutorial! ;) Any questions I have will be posted back here, so keep watching. :P

ruben

Posted 06 November 2005 - 12:10 PM

Sorry for double posting, but I wrote it in HTML now.
I included a little tool to calculate back and forth and I showed the different font sizes (be sure to try zooming).
The JS tool came quite handy for my purposes, so I hope you can make a use of it too (if not, then your web-layout is EVIL :P)
Pixel <——> em-quad

If you would like to see something where I tried to use only EM (except for images and google ads ;)), then check my Vocabulator Test
The English version exists already but I did not update it yet. Feedback welcome btw.

ruben

Posted 02 November 2005 - 11:41 PM

Thanks folks!
Yes, I'll put up a better version in HTML later this week (I don't know about you, but right now it's quite late in Sweden). The German article I referred to already has that stuff, but I'll come up with a nice graph too.
As an answer to mzwebfreaks question: The EM is originally derived from typography, meaning the width of the letter "M" or the dash "–" (long dash, not short dash "-"), which usually had the same width in a font. Nowadays the meaning has extended (since M does not exist in Chinese for example). It now means the height of a font. Since it is derived from typography I thought it should be possible to define the size of a font in Adobe Photoshop or InDesign with 'em', but it is not possible (not for me at least, I tried!).
I read some stuff about its history now and I think it goes way back in history to the time where they still placed little iron thingies on their printers and the em-quad was a space of the width of an –.. Something like that. Nowadays at least on the internet (what matters ;)) em is a relative size!
I think it has lost its meaning in typography (which is the only meaning that would matter in Photoshop, because relativity does not mean anything to pictures). The new meaning means nothing in Photoshop or Indesign, because you create fixed Bitmaps, pixel for pixel, where there is no setting to which one could refer relatively (like the 16px/96dpi setting of a normal user browser). Did this make it clear? I hope so.. I'm a little tired.. if you don't understand, ask again and I will put some brain power on it :P

Also interesting to read (found them only now) is the article by the W3 Consortium (for some reasons the links there are dead, but the article is interesting as is!)

Review the complete topic (launches new window)

  1. Open Discussion & Free Web Hosting
  2. → Computers & Tech
  3. → How-To's and Tutorials
  4. → Websites and Web Designing
  5. → Sizes In Webdesign: Em Vs. Px
  6. Rules