CSS - em vs. px

[kooia]

Hi everyone,

I have the impression that Internet Explorer can only use EM's. I also have the impression that em's are normally 16 px, but can very in size.

Is this true?

Both ways, how do you define the size yourself?

kooia

[diafol]

Not true.

You can set a 'standard size' for 1em = 10px by setting font-size: 62.5% in the css body element:

body { 
  font-size: 62.5%;
}

So now you can set elements in em, knowing that:
1.2em = 12px; 1.6em = 16px, 2.8em = 28px etc etc.

[almostbob]

an em has no direct relationship to a pixel, the relationship given so many times in old, very outdated, publications is based on a 96dpi crt monitor, current monitors 176dpi and higher, so there are a hell of a lot more px in the screen, and in an em
an em is entirely a relative dimension, the size of the W or M in the current basefont, the basefont set by the user to the user's preference. Which means that fonts set in em are device/window/resolution independent so a much better choice than px, which on a hi res monitor 10px = 1.38mm = 0.08inch hi, invisible
Dimensions in em and % are current best practice in screen layout, pt in print, px solely for images

[kooia]

So, am I getting you right that IE supports PX, but it's better to use % and EM's?

[Frankey]

I always use pt when it is concerning fonts/text. pt is in my opinion the easiest to work with and the best compatible with all resolutions, also the mobile browser. In other words, the text remains readable with pt.

IE supports em,%,px and pt.

For divs i always use px because you don't want to have a messy layout in other resolutions, or you are building a elastic layout ofcourse.(what was the correct word for elastic again?)

[almostbob]

its is better regardless of browser to use ems and %, the page will work and appear very similar in every standard compliant(1), and almost standard compliant browser(2)
from Opera mini(1) and Blackberry(2) handheld devices
to Opera(1) Firefox(1+++) all the LIinux browsers(1) and IE(miserable 2)

If shrink the window from fullscreen to half, any part of the content pushes offscreen right, fail
Joe the plumber: comparing two sites puts them in paned windows side by side,
siteA content reflows and remains in the window
siteB content stays put and flows offscreen
Joe goes to site A,

CEO of BigCorpInc, in aircraft, executive busymode, checks out site on PDA SiteA works, BigCorp places order with siteA for 1Million widgets

SiteB product massacres siteA product, doesnt matter, nobody buys it

second approach maybe,,
DanWeb, in small windows pushes offscreen right, doesnt matter coz CsGal put the BS on the right and content on the left where it stays on screen,

[Kaycy]

Thank you for the clarification of the EM vs PX. I am learning that my way of creating web sites is so out dated! I will start using the EM's from now on. :)

[adri_grace]

I started out using ems, but I've had several clients complain about how pixelated the fonts look on PCs. I tried px and that seems to help, but hasn't solved the problem entirely. Will % resolve this problem?

[Frankey]

could be, just set your fontsize to 100% for al your elements for a starter.

body { font-size:100%; }