|
|
Posted by Andy Dingley on 12/24/60 11:39
John Salerno wrote:
> 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.
Navigation:
[Reply to this message]
|