Converting px to em?

[John Salerno]

Is there an easy way to do this? I've read that it's better to use em
than px for positioning, so I wanted to convert this:

body {
margin: 0;
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
min-width: 240px; /* LC fullwidth + CC padding */
}

#header, #footer {
margin-left: -200px; /* LC fullwidth */
margin-right: -190px; /* RC fullwidth + CC padding */
}

.column {
position: relative;
float: left;
}

#center {
padding: 0 20px;
width: 100%;
}

#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}

#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -100%;
}

#footer {
clear: both;
}

/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

Is there an easy way to do this? I've read that it's better to use em
than px for positioning, so I wanted to convert this:

<snip>

Just replace all the px sizes with appropriate em values.

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno

<snip>

Just replace all the px sizes with appropriate em values.

I know I will feel stupid after you answer this question, but how do I
do that? I don't see an immediate connection between, say, 200px and any
particular em value. I know em is relative to its ancestors, but I don't
see how that works here.

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

I know I will feel stupid after you answer this question, but how do I
do that? I don't see an immediate connection between, say, 200px and any
particular em value.

That's the whole point - if there was a direct correlation, there would
be little point in using the one rather than the other. Generally I find
around 15-20em is a good starting point for sidebars - adjust to suit.

I know em is relative to its ancestors, but I don't
see how that works here.

No it's not. It's always relative to the user's default font size.

 

[David Dorward]

No it's not. It's always relative to the user's default font size.

When used to specify font size, it is relative to the font size of the
parent element (unless there is no parent element in which case its the
user's default)

When used to specify anything else, it is relative to the font size of the
element to which it is applied.

 

[Steve Pugh]

Deciding to do something for the good of humanity, John Salerno


No it's not. It's always relative to the user's default font size.

No, 1em = the current font size, which may or may not be relative to
the user's default.

silly example:
body [font-size: 15pt;}
p {margin: 2em;}

"The 'em' unit is equal to the computed value of the 'font-size'
property of the element on which it is used. The exception is when 'em'
occurs in the value of the 'font-size' property itself, in which case
it refers to the font size of the parent element."
http://www.w3.org/TR/CSS21/syndata.html#length-units

Steve

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno


That's the whole point - if there was a direct correlation, there would
be little point in using the one rather than the other. Generally I find
around 15-20em is a good starting point for sidebars - adjust to suit.

So is this more of a test-and-see kind of conversion? There's no way to
keep things the way they are when it's changed to em?

 

[Beauregard T. Shagnasty]

So is this more of a test-and-see kind of conversion? There's no way
to keep things the way they are when it's changed to em?

The way they are? Do you mean the same width? Well, if you have a nav
column of 150px, try changing that to 10em.

When done this way with em units, the column will grow along with the
text size when a visitor increases his text size, rather than have the
text spill out of the column.

I only ever use pixel measurements for borders and the occasional line.
All other measurements are defined in ems. Font sizes are defined in
percentages.

 

[Benjamin Niemann]

So is this more of a test-and-see kind of conversion? There's no way to
keep things the way they are when it's changed to em?

If everything stays the way it was, there'd still no reason to change
anything

If you already changed your font-sizes to relative sizes, you could (in
theory) calculate the actual pixel size of the font (starting from the size
as configured in your browser) for each element where you need it (or count
pixels on your screen . Or you may still know what the pixel size was,
before you changed the unit for font-size. Then divide your pixel length by
the fonts pixel size and this should give you ems.

Not really efficient, I'd guess...

Once you get used to it, you'll get some kind of feeling for it (how many
ems you need in order to fit N characters in a box and stuff like that).

 

[John Salerno]

When done this way with em units, the column will grow along with the
text size when a visitor increases his text size, rather than have the
text spill out of the column.

But what if you want fixed size columns?

 

[Beauregard T. Shagnasty]

But what if you want fixed size columns?

...so that when a vision-impaired person presses Control-Plus so s/he can
read the page, the text spills out of it?

Refer again to Ben's templates, or this site of mine,
http://www.countryrode.com/
and increase your browser's text size. Note how the columns get larger
(wider) along with the text, whereas with a fixed-pixel column width,
the text would overflow the column borders and look rather silly.

 

[Stan McCann]

But what if you want fixed size columns?

Not real nice to do to people but {overflow:hidden} will clip the text
instead of letting it spill out.

 

[Beauregard T. Shagnasty]

Not real nice to do to people but {overflow:hidden} will clip the text
instead of letting it spill out.

I'd agree that wouldn't be nice ...

 

[John Salerno]

..so that when a vision-impaired person presses Control-Plus so s/he can
read the page, the text spills out of it?

Refer again to Ben's templates, or this site of mine,
http://www.countryrode.com/
and increase your browser's text size. Note how the columns get larger
(wider) along with the text, whereas with a fixed-pixel column width,
the text would overflow the column borders and look rather silly.

Well, all I plan to have in my left bar is a navigation menu, so I'm not
sure if I need/want that to be resized.

 

[Beauregard T. Shagnasty]

Well, all I plan to have in my left bar is a navigation menu, so I'm not
sure if I need/want that to be resized.

Then suffer the complaints when a visitor tells you the text doesn't
fit. Did you look at my countryrode.com site and increase your text
size? Is there any particular reason I would want to have the nav button
say (with the [[ ]] indicating the width of the button)?

____________________
[[Apparel & Lifest]]yles
____________________

 

[Andy Dingley]

Is there an easy way to do this? I've read that it's better to use em
than px for positioning,

Convert all heights to ems, using an approximate 15px / em ratio. Then
look at and see what it looks like (with your Firefox set to default
sizing). Adjust.

Remove all font-height settings, except those on <body> to set it once
to 1em (but specified as 100% because of an IE bug). Allow the default
stylesheet to deal with headers. Permit some classes for "large text"
and "small text" to vary these, but leave that bodytext alone as 1em !
The user needs to _read_ it, not to admire your greeked-to-oblivion
c00ldesign. Reasonable sizes for "small text" are 80% and 67%, but
anything below this is unreadable (if I've set my default body text to
be <foo> high, then 2/3rd foo is about the limit most people are happy
to look at. If it were bigger than this, the user would probably
already have made their body text smaller, so as to read more of it).

Adjust again (but not that body text!). Repeat as necessary. Get into
the habit of rolling the text size up and down whenever you look at a
page to judge it.

Learn how "collapsing margins" work.


Horizontal widths can also be converted to ems by a similar process.
However you'll find that many designs depend quite heavily on
fixed-width bitmap images. This is a good justification for keeping
with fixed-width sizes for some portions of your horizontal sizing.

For a simple life with cross-browser horizontal sizing, set padding and
borders to 0.

You can mix horizontal sizing units between parents and children, but
keep them consistent between adjacent units or you can get some very
funny behaviour when you adjust text sizing. Keep things simple at
first.

Avoid % sizes for block elements until you understand the other units,
and you understand the inheritance rules for what "100%" is derived
from. Mixing percentages with the other units is powerful, but hard
going.

 

[John Salerno]

Well, all I plan to have in my left bar is a navigation menu, so I'm not
sure if I need/want that to be resized.

Then suffer the complaints when a visitor tells you the text doesn't
fit. Did you look at my countryrode.com site and increase your text
size? Is there any particular reason I would want to have the nav button
say (with the [[ ]] indicating the width of the button)?

____________________
[[Apparel & Lifest]]yles
____________________

Oh I see. I was thinking of having it fixed in a different way, probably
using the wrong terminology.

 

[John Salerno]

Convert all heights to ems, using an approximate 15px / em ratio. Then
look at and see what it looks like (with your Firefox set to default
sizing). Adjust.

Remove all font-height settings, except those on <body> to set it once
to 1em (but specified as 100% because of an IE bug). Allow the default
stylesheet to deal with headers. Permit some classes for "large text"
and "small text" to vary these, but leave that bodytext alone as 1em !
The user needs to _read_ it, not to admire your greeked-to-oblivion
c00ldesign. Reasonable sizes for "small text" are 80% and 67%, but
anything below this is unreadable (if I've set my default body text to
be <foo> high, then 2/3rd foo is about the limit most people are happy
to look at. If it were bigger than this, the user would probably
already have made their body text smaller, so as to read more of it).

Adjust again (but not that body text!). Repeat as necessary. Get into
the habit of rolling the text size up and down whenever you look at a
page to judge it.

Learn how "collapsing margins" work.


Horizontal widths can also be converted to ems by a similar process.
However you'll find that many designs depend quite heavily on
fixed-width bitmap images. This is a good justification for keeping
with fixed-width sizes for some portions of your horizontal sizing.

For a simple life with cross-browser horizontal sizing, set padding and
borders to 0.

You can mix horizontal sizing units between parents and children, but
keep them consistent between adjacent units or you can get some very
funny behaviour when you adjust text sizing. Keep things simple at
first.

Avoid % sizes for block elements until you understand the other units,
and you understand the inheritance rules for what "100%" is derived
from. Mixing percentages with the other units is powerful, but hard
going.

Thanks! I think I'll have to read that about 20 more times though!

 

[John Salerno]

Refer again to Ben's templates

Why is the markup for the 3-column with footer template so different
than the 3-column template? I noticed that the left-column and 3-column
templates are identical, which is good for switching them out, but why
does having a footer make you have to change things? It looks like
there's an extra div wrapped around everything.

 

[Beauregard T. Shagnasty]

Why is the markup for the 3-column with footer template so different
than the 3-column template? I noticed that the left-column and
3-column templates are identical, which is good for switching them
out, but why does having a footer make you have to change things? It
looks like there's an extra div wrapped around everything.

It's a bit tricky to get a footer the full width of the window, and
still keep it below the content. And if the content doesn't extend all
the way to the bottom of the window, that footer stays at the bottom.
You can probably test that with a wide browser window.

Also seen here (Ben's link on the footer page):
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html