SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page resizing - em or px

    Hello,

    Take a look at www.mattjadams.info

    I am currently designing a site, i have so far managed to make most of the code ie6 friendly so its all going well until the other day when i accidentally zoomed in on the page. Most things seem to work however the navigation menu does not resize. I want my site to be as friendly/versatile as possible, and i cant work out why this is happening. At the moment i am using px as my unit of measurement however i read somewhere that it is better to use em. I converted all the pixel measurements to em - using the rule that 0.063 em is 1px, however this dosnt seem to correspond. I dont really understand em - is it dependant on something like screen resolution or is it an absolute measurement?

    So by question is threefold really....

    1) Are em measurements exact i.e 0.063em = 1px therefore 0.630 = 10px?
    2) Is it better to use em rather than px?
    3) Why does my page not resize correctly when zooming in/out?

    Any help would be appreciated!!!

    Thanks

    Matt

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    em's are based upon the parent font size
    http://reference.sitepoint.com/css/font-size

    Just read that and most of your questions should be answered .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    But what about sizing boxes? i.e i have a div which is 5.7em - does that mean it is (roughly) 100px? When i test it - it is definitely not 100px. Is em only used for fonts?

    Im not sure why my navigation bar dosnt scale properly either....

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Em's can be used to size boxes. THough as I said it is based off the parnets font size.

    If you give a div of 5.7em, the parent font size would have to be about 17.5px (1em=17.5px in this example) (though browsers would round)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mattadams84 View Post
    1) Are em measurements exact i.e 0.063em = 1px therefore 0.630 = 10px?
    As mentioned before an em measurement is based on the parents font-size. If the parent is assumed to be 16px by default (although there are no guarantees that this is true for many reasons) then 10px would be 62.5% or .625em.

    However you cannot assume that the default is 16px as the user may have changed the default or be using their own stylesheet.


    2) Is it better to use em rather than px?
    For scalable layouts and to preserve the ratio of changes between the elements on the page then ems are preferred. If you reduce a parents em font-size then the relationship between the parent and the children is automatically catered for (unlike using pixels which would mean only the parent would have changed size).

    It can be tricky though and as ems are rounded up and down you will find the odd pixel difference here and there.

    3) Why does my page not resize correctly when zooming in/out?
    Because you have sized the elements in pixels and therefore when text is zoomed the elements can only expand vertically and not horizontally due to the width restrictions and the layout does not retain its correct aspect.

    Most modern browsers these days however will allow you to zoom the whole page ok.


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
  •