Em > Px

when using px or % for the layout, if someone changes there font size on there browser, does that mess the layout up? or does it stay is it is meant to?

Em is better, % can be useful on some specific parts; but sometimes you don't have a choice and you have to use px.

However with the Opera-style new size increase of Firefox 3, things are moving on that subject.

first you can set this for the whole page:

body {
    font-size: 62.5%;
}

That makes 1em = 10px.

To return the original size of the text:

p {
    font-size: 1.3em;
}

After that you can use em to size everything. (even the images)

like this:

#logo img{
    width: 13em;
    height: 7em;
}

Now you can zoom your site in and out and all the visual components will be properly resized.

Jérémie, probably you are right but can you tell me in what browsers it leads to issue. I'm using this technique in my website and I've tested it in all browsers I can. IE, FF Opera, Safari, Chrome
Do you mean Konqueror? (I've not tested in it)

This method allows you to set the desired font and element sizes of the components and to leave it zoomable.  I have to say I've read this mehtod in a CSS/html book (don't remember the name) and it works perfectly in my case. My website covers all the accessibility requirements.

Please, show me where it fails (if any)

Best regards,
Miroslav Popov

Last edited by Popov (2008-09-10 16:56:14)

text = em
layout = px

I told you that already...