Page resizing - em or px

HTML & CSS
1

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

em’s are based upon the parent font size

Just read that and most of your questions should be answered :).

3

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

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)

5

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.

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

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