Em vs px

Hi Guys,

just wondering which is the best to use for me

i have a layout that is fixed at 900px wide

and my height will also be a fixed height but have overflow on the inside div set as auto so it should scroll

should i use em or isit okay to use pixels as my layout is fixed?

Off Topic:

I’d rather code a horrible page then jump off a cliff, though that’s just me :slight_smile:

So if they asked you to jump off a cliff, would you?

I guess since you have agreed to do far worse than that then you wouldn’t even stop to ask “which cliff”.

its not my design im coding…this is the way i have been asked to do it :stuck_out_tongue:

You’ve been asked to do it a really bad way :frowning:
The question is - are you serving your boss better by slavishly following his orders and producing something that doesn’t work properly, or by advising him on how to make something better?

That’s where your position as a professional comes in. People come to you rather than do it themselves as you know how to do it and why things need to be done certain ways. Your job isn’t just to code, it’s to educate and do what’s in your clients best interests! :slight_smile:

In other words, and in short, the web is not paper.

This should be a mantra and every web “designer” should be required to repeat it at least 10,000 times each day before going to bed until it eventually sinks in.

Yes, font sizes are relative to the font size of their parent/container.
The upper most container being the <body> that has the font size as set in the browser preferences.
If you want to avoid confusion you could do the following: instead of nesting the .8em in the 3em div you could create to spans/divs in the containing div, one with .8em and one with 3em, and don’t specify a font size for the containing div.

If you’re talking about the typeface, you’ll want to use EM rather than PX for the sake of accessibility and resizing options within Internet Explorer. :slight_smile:

Unfortunately that gnarly browser doesn’t allow for resizing PX text and as mentioned above it can cause some issues with people who have vision disorders.

font size

Yup, the above is correct. 1em is considered 100% by the browser or default font size. Mostly font size is inherited… so…

I have a div with 3em font size.

and inside that div is another div with .8em font size. This is actually .8em of the parents 3em size, not .8em of the default 1em.

That make sense?


i get confused with em’s because it seems to take on the sizes of nested divs too :blush: any tips?

The best advice for font size it to always use relative sizes like % or em, seeing as some people have the font size in their browser increased (because their vision is not really good and they need the font bigger in order to be able to read things).
For those people, you’re really not helping if you define your font in pixels, since it will probably be (a lot?) smaller than they’re used to.
Using em or % the font scales so these people can also access your site.

What are you using these units for?

Ok, so bad layout from an accessibility standpoint.

Complete and miserable /FAIL/ at layout since that’s pretty much a no-no if we’re talking the entire page or content area.

  • possibility of two scrollbars - way to go…

If you are talking CONTENT like paragraphs, it is NEVER ok to use px. PERIOD. But, since you are fixing the height of the container, you can’t use dynamic fonts without either breaking the layout or tripping the second scrollbar.

Though it hinges on what element your talking about - if this is just a small header next to the logo, then fine… if it’s the actual page content; the part the user is ACTUALLY visiting the page to read… it sounds like you’ve gotten WAY too complicated for your own good.

Lemme guess, have some pretty picture drawn up in photoshop that doesn’t have ANY design provision for growing in height? That would be ANOTHER example of why “but I can do it in photoshop” has nothing to do with practical web design.

Though without seeing the actual content or elements involved, anything ANY of us would say here is pretty much wild guesses in the dark. The only thing I can say for certain is that your first three details revealed are things in design I usually say “NO!” to.

I’ve literally slapped an artist for that once. (note, if all they can do is draw pictures in photoshop they’re not a web designer, they’re an artist since it means they know two things about coding and accessibility guidelines - and Jack left town, took his **** with him!)

Rule One for Web Pages - there are no fixed sizes, anything you try to fix in size will either break in most of your visitor’s browsers or they will override your sizes with their own so as to make the text the size they want. If you don’t design your content to be flexible then it will just look like garbage to many of your visitors and be a showcase for how little you know about the web.