MEM wrote:
> Gunlaug Sørtun Wrote:
>
> "When you don't declare font-size and/or line-height, all browsers
> will use their own default values."
>
> I see... so it's default BUT we have to give him same values so he
> can't "default by himself". And since there isn't any update list of
> what properties the browsers use differently by default and what
> properties they don't use differently by default, it's a good
> practice to declare all by ourselves. - Please tell me this is
> correct (or don't) :)
It is correct - up to a point :-)
Whether or not to override browser-defaults depends very much on actual
design and "personal preferences", and you'll better get some experience
with design and browsers before you start "crushing" browser-defaults an
mass.
Font-size, line-height, font-family etc, yes, declare those.
Margins, paddings, yes, you may want to declare those too for a few
elements, if/when the defaults and/or default-differences create
design-problems.
> Gunlaug Sørtun Wrote:
>
> "Actual font-size is always 1em of itself - and also 100% of itself
> if that makes it any clearer, and that "reflection" doesn't change no
> matter what the font-size actually is. A pixel on the other hand is
> a fixed-size "design pixel" no matter what, and has no relation
> whatsoever to font-size."
>
> So when we choose em instead of pixel we are saying to the browser,
> please adapt the font-size according to 1em or 100%.
Not quite, in your case. We're actually telling the browser to adjust
some elements' height to correspond with font-size - whatever the
individual browser actually calculates that font-size to be based on its
own default, or on our declaration if we had included one.
In your case I only declared element 'height' and 'line-height' on the
relevant elements. I left the browser's own default font-size intact, as
I didn't declare any font-size.
> What exactly is 1 em or 100%? It could be the exact value of the
> font-size, depending on the font we are using. This way we avoid
> pixel rounding values, because we know that 100% will always be the
> max-height of a letter for example? Is that it?
We think of 'em' as the height of the letter "M". Just remember that the
'em' has the same length both vertically and horizontally - it's a
perfect square.
From CSS 2.1:
"The font size corresponds to the em square, a concept used in typography."
1em = 100% = em square = font-size.
Now, declare something like...
h1 {font-size: 2em;}
...on...
<h1>a perfect headline</h1>
...and see that the h1 gets rendered at 200% the size of plain text.
However, now you have to keep the concept of 'em' in mind, and
understand that the text inside that h1 is exactly the size of
1em = 100% = em square = font-size of the h1 itself.
So, to downsize the text in a span in that h1, you declare...
h1 span {font-size: .5em;}
...on...
<h1>a perfect headline <span>with a span</span></h1>
Applying the concept, the text in the span is exactly the size of
1em = 100% = em square = font-size of the span itself.
Too many up- and down-sizings may make it difficult for you to keep
track of how large an 'em' actually is and which font-size on which
element controls what, but browsers won't have problems calculating it.
Best not stray far from browsers' default and/or declare too many
font-sizes though, as rounding-differences will sneak in. Browsers have
to convert 'em' into pixels for every font-size before rendering, and on
average-resolution screens that can result in */- 1 screen-pixel
rendered font-size and/or element-dimensions.
So, don't expect "pixel-perfection" across browser-land, as you'll only
be disappointed. Each browser on its own will do quite well though, so
you most often won't notice unless you compare their rendering pixel for
pixel.
General advice: declare 'font-size: 100%; line-height: 1.4;' on body,
and then size headlines and paragraphs and other text-carrying elements
based on that font-size - in '%' or 'em'.
The "unit-less" line-height value makes the line-height 1.4 times the
actual font-size of each element, and levels out any differences in
browser-defaults for that property - defaults generally vary between 1.2
and 1.3 for line-height.
By declaring this you're actually confirming the browsers' default
font-size, and are killing a nasty IE/win "em bug" in the process. The
reward will be pretty stable and reliable behavior across browser-land.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
