Em, Px or %?

[Makaveli2007]

I've been learning some CSS mostly by reading a book and a couple of websites, but one thing isn't clear to me, yet (maybe b/c the author of the book suggested using one thing and then used the other one in some examples).

If I understand it correctly the main thing to consider is that browser windows can be changed in size by the user, thus some of those units can cause problems.

Do you have any rules for using Em, Px or %? When should a webmaster use which one? Should I avoid any of them?

thanks!

[Xapti]

You should mostly just avoid px. px is only useful for keeping text in proportion to images which are also sized with px, or for sizing images and their containers in px.

px is almost exclusively used for padding and borders, but I personally like using ems, as it's proportional.

The easiest and most accessible method of designing a page would definately be using ems for both element sizes, as well as text size.

Using relative percentages for containers can look cool, and be useful, but the one problem with it is you can't help but have space wasted, or space missing in many cases.
Lets say you had a navigation bar which used 20% width of window, and the remaining 80% was content, or some master of subdivisions of remaining content. If a user had a very high resolution, most of the navigation content will have lots of white space, and it may look rather strange. If a user has very low resolution or window size, then content will not be able to fit properly... it will make too many new lines, overflow, and/or be cut off.

IE6 (and possibly 7, not sure) have problems rendering ems correctly for some reason, so the simple fix is to put text-size:100% in your body.

The main advantage of ems is that it will use font size Relative to the browser's default. This makes it easy for them to read all your text, since it already set relative to the size they prefer. The second advantage is that for sizing containers such as divs, when you set the width (or in some cases height), that width or height will grow proportionally whenever the text size is increased, so that you won't run into overflow problems.
In that way, you can manually set the width of your nav bar to be as long as you want (often as long as the longest list-type item), and not have to worry about text resizing (although using ems, it not as likely they will want to resize anyways)

[Dabrowski]

The only thing about ems I don't like is that sometimes it's relative to the default, sometimes to it's parent, and sometimes to itself.

What xapti is saying is correct, but if I'm doing a site and want it done quickly, I use px, that way you know exactly what you're getting.

[Makaveli2007]

thanks guys,

so using em might be a bit more difficult but usually does pay off in the end if I want my site to look good?

And the only problem is that IE doesnt always interpret 1em as 1em(?), so I have to set text size as 100%...and won't have to use any other hacks or something like that?

Now that I mentioned it: Is using hacks generally a bad idea? Should I avoid doing that if it's possible in any way so the code doesnt get too complicated?

[Dabrowski]

end if I want my site to look good

Your site can look just as good without, it depends if you want the site to scale properly if the user sets a larger or smaller font size.

IE doesnt always interpret 1em as 1em

Nothing wrong with now IE interprets it, the problem is, you never know what 1em actually is. For instance, if the default is 14px for example, then 1em will be 14px. Then if you use 2em for something then that will be 28px. But then for everything inside that 1em will be 28px, so to get smaller text you'll have to use 0.5em to get back to 14px.

Elements also react differently to it depending if they're inline or block elements.

Is using hacks generally a bad idea?

I would say yes, because as well as being time consuming, and as you pointed out untidy to code, you don't know how a future version will react to it.

I prefer to keep your design simple, that way you avoid the hacks and so far I've managed to keep my code clean. But for some things you want to do a hack is probably unavoidable.

Edit: A lot of hacks are avoidable if you use a small table for layout, but don't tell anyone I said that!

[edited by: Dabrowski at 8:05 pm (utc) on Dec. 9, 2007]

[rocknbil]

px, that way you know exactly what you're getting.

Unfortunately FireFox doesn't respect pixel settings, it resizes pixel-sized text.

Is using hacks generally a bad idea?

Hacks are mostly used these days for IE 6 or earlier. If you code to standards compliance, you shouldn't NEED to use hacks for standards-compliant browsers.

I avoid them like the plague because the possibility (probability?) exists that someday the hack will be interpreted differently since it's outside the spec. This will break old layouts that you'll have to go back and fix.

My solution is in the early stages of development I test, test, test - it's not uncommon to encounter something that won't work without a hack. In this case I re-think a different way of achieving the same effect without hacking up the code. It's a bit more work and extremely frustrating, but so far I've been able to pull it off, without giving in to a hack or my old table addiction. :-) Sometimes this means a compromise of my oh-so-important layout - the end result may not be exactly what I meant, but close enough to work.

I haven't had to resort to IE conditionals either, which IMO is a hack in disguise.

[Makaveli2007]

b/c you mentioned your old ways of using tables lol, I think I noticed something..if Im wrong correct me (anyone :-)):

I used to be so worried about which version of html or xhtml to learn (and if there'll be a new version and Ill have to adapt to that again)...and now I think I'm realizing that in the end I'll only need 20 different html-elements/tags, b/c virtually everything is done with CSS. No tables..no font-tags, no colors, no background-stuff,...

so basically now this feels like Im learning 90%CSS and 10%Html to design websites.

Am I underestimating the amount of html I have to learn or is it really like that b/c all the complicated stuff (the actual lay-out part) is done with CSS and if you use CSS you only need a little bit of HTML code really?

[Receptional Andy]

You definitely need less HTML if you use CSS for presentation, since, well, you don't need any presentational HTML ;)

Generally speaking, the HTML you will use frequently will be a small set of tags. The key is knowing which is the best tag to use in a given situation. Knowing this actually makes the CSS side easier too.

So, for example, you might have a set of quotations on a page. So, you might use the <cite> tag and then style that with CSS. Or you have a data table and make use of table captions, summaries and row/column headings.

[Dabrowski]

so basically now this feels like Im learning 90%CSS and 10%Html to design websites

Bang on. The key is, keep your HTML clean, and your layout simple. At least to start with. Then you'll get along fine.

It wouldn't hurt to delve into some Javascript, but that's a different kettle of fish altogether - a real programming language, so get the basics first.

[Xapti]

IE6 does have a rendering problem with ems. It doesn't occur out of nowhere, it needs certain conditions (don't remember what) but it does not follow spec unless you use font-size:100% in a place like the body. Something like that isn't really a hack, just simple, legal fix (not even a workaround). I also agree that hacks are bad ideas, for the same reasons as have already been mentioned.
IEs can easily be fixed with conditional comments with different styling, or a javascript fix.

The issue with using px is that objects will appear quite small at high resolutions, and they will appear quite large at low resolutions. It doesn't give much flexibility for the user. For those using IE 6, they will have even more problems if they don't like the font size, since pixel-sized text cannot be resized in IE6; they're stuck with what they're given.