I'm in the process of creating my site from scratch, and i'm trying to adhere to web standards completely (or as much as possible, anyway)
I've been successfull in pretty much everything so far (css based layout, xhtml markup, no tables, etc..), but one thing has stumped me..
I've seen various stylesheets (created by renowned members of the web developer community), and noticed that different units are used. Most popularly, I've seen pixels and em's used.
Until now, I've been using strictly pixels for units in my code, but came across some brief material that suggested that pixels may be the wrong unit to use, and went on to say that different units should be used for different purposes, but never really went into specifics.
Could someone clue me in on what css units are to be used for what purposes?
eg..
pixels - images, positioning
em's - font size, padding, margins, etc, etc.
I'd really appreciate it if someone can clarify this for me..
This is one of those questions that often crop up but people have diverse views on
Images:
Obviously images are a fixed size and so you should really specify them in pixels so there is no way to specify them with a fixed ratio of height/width that will keep them sane.
However some image don't look to bad if you use percentage widths and heights but its probably very rarely that percentages will be used.
Text:
If you use pixels for text sizing then IE won't let you resize the text through the browsers controls which is bad for accessibilty. However the drawback of not using pixels is that enlarging the text may break your pixel perfect layout which is why a lot of designers still use them.
I think you should use ems for text sizing on main blocks of information but if you have small bits of layout that you want to keep together then use pixels if there is no other way.
ems (or percentages) will allow the user to resize the text and is good for accessibility.
If you have em text inside an element of fixed height then you could find the text growing out of its container. You could also therefore define the width and height of your container in ems also and they will both grow together.
This approach may be quite hard to manage in a complicated layout so most people will use ems for text and pixels for positioning and structure etc.
If you define padding in ems then the relationship between the elements is constant at different resolutions and text sizes. However there is a slight drawback in that the browsers can sometime struggle with em padding and will often loose the borders on elements which is why I usually avoid using top and bottom padding in ems.
As you see the issue isn't always clear cut (as usual) and a lot of it boils down to preference and working practices.
Bookmarks