SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2004
    Location
    columbus, ohio
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Which CSS Unit to use, when.. (pixels, em, etc.)

    Hi,

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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hmmm

    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.

    There is a good article on font-sizing here:

    http://www.thenoodleincident.com/tut...x_lesson/font/

    and more info here:
    http://www.elsid.co.za/download/css_fontsizes.htm
    http://www.allmyfaqs.com/faq.pl?CSS_Units

    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    columbus, ohio
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was an excellent, and extremely helpful reply, Paul!

    Thanks a lot! That clarifies almost all my doubts.. I wish there was a way of rating posts, as this one'd definetly receive 5 stars..

    Thanks again!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •