Jump to content

Em vs. px


TiggersBounce

Recommended Posts

This being my first post, I'm going to ask something simple but important (at least to me).

 

History... I have been building simple HTML websites for my own small business(es) since the mid 90's. All the layout has been done with tables, everything sized in pixels, nothing fancy just WYSIWYG design using Composer, a bunch of hand coding and some javascript I wrote myself.

 

Now ... it is a new millennium, my site doesn't look good on a CrackBerry, gotta learn some CSS and relaunch my site. No more tables. I will be using KompoZer because it is cheap, familiar and after working with it for a few weeks seems to suit my style.

 

But ... a decision .. should I construct with a layout based on pixels? Or do I switch to ems for all the layout. What are the pros and cons of each?

 

Thanks in advance. I tried the search function but it couldn't seem to get any hits for ems.

Link to comment
Share on other sites

I think your question is a larger one related to CSS - you have to learn basic CSS.

 

In terms of pixels vs ems ... that is related to fonts and these days, all the browsers can resize pixel based font sizes, so use either or.

 

PS:I know what you mean about updating old sites; we are currently in the middle of that process as we speak. The above site that I linked to (csstutorial.net) is just one example - the new version should be up any day.

 

Stefan

Link to comment
Share on other sites

Thanks for the info. I have worked my way through that tutorial and it was a valuable starting point. I started with the basic "Killer Handbook" layout and then experimented quite a bit adding things like backgrounds, floating parts here and there, clearing floats, etc.

I look forward to seeing the updated site.

So I can choose to do all my margins, paddings, heights, etc in either pixels or ems and it won't matter (as long as I consistently use one or the other I assume).

Link to comment
Share on other sites

I agree that px for all sizes is probably easier to code if you are a beginner.

 

IE won't let a viewer change only the text size if the font is px, but Firefox and other browsers allow you to increase text size without increasing images or the text containers (so text may overflow or get cut off but the containers and page size remains the same).

 

IE7 and IE8 have a zoom, like Firefox and most other browsers, which increases everything on the page, so you have to scroll a lot more but nothing should overflow the container if it fitted originally.

 

ems is related to the default font size, so it's a good idea to size everything in ems like divs, tables, images, margins, padding, etc. as well as text. Then if the default font size is changed, everything changes in proportion.

 

Remember that if you have a default font size of 1em and then a style (say for a p tag) of 0.8em and then a class used within a p tag also with 0.8em, the text will have the 0.8 applied to the parent's 0.8 so the text size will be 0.64 of the default size.

 

It's very easy to forget that when using classes within parents that both have a different em size from the default.

Link to comment
Share on other sites

Thanks for that. I found the Zoom tool on the Firefox menu, and now have another tool to see how my page looks in different views.. I have already been using the View No Style to emulate the look on a small device like a BlackBerry, even using it to look at other sites .. and have learned valuable lessons regarding separating not only position but images as well from textual content.

 

In dealing with images (.jpg, .gif, etc), do you:

a) size the image in em x em in the file or,

B) do you have an image in px x px that is sized on the page by the display in ems

Link to comment
Share on other sites

I don't use ems except in very special cases, I find it inconvenient to code.

 

I use px for everything. Now that modern browsers have a zoom, a person with bad eyesight can use it and still see everything on the page in the same relationship.

 

Before zooms, people could only increase text size which made the relationship of text to images and container sizes all wrong, so some coders used ems to get over that problem.

 

I recommend that you either use px for everything or ems for everything, don't mix them.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...