W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2001

RE: Use relative sizing and positioning

From: Robert Neff <rneff@bbnow.net>
Date: Sun, 6 May 2001 14:26:30 -0500
To: "Charles F. Munat" <chas@munat.com>, "WAI Interest Group" <w3c-wai-ig@w3.org>
Message-ID: <AHENJNNCANEHAIIBJNDGMEJACHAA.rneff@bbnow.net>
interesting appraoch to use padding here.

-----Original Message-----
From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org]On
Behalf Of Charles F. Munat
Sent: Sunday, May 06, 2001 1:11 PM
To: WAI Interest Group
Subject: RE: Use relative sizing and positioning


Robert Neff wrote:
"i have started an example page and welcome anyone to comment, see
http://216.149.102.55/ea0-stylesheet.asp  and
http://216.149.102.55/css-ref1.asp"

One problem you are going to run into is using relative font sizes and then
fixing the line height with pixels. If the user increases the font sizes
enough, they will exceed the line height. What happens then is anyone's
guess and probably varies from browser to browser.

If you want to set the line height (usually to override the default behavior
of browsers on superscript or subscript text -- which messes up the line
heights), you should probably use em for both font size and line height,
e.g.:

font-size: 0.8em;
line-height: 1em;

As for positioning items with pixels, I find this much less of a problem.
When using relative sizes for positioning, the effect may depend on the
font-size of the item being positioned (this may vary by browser):

<h1 style="font-size: 2em; margin-left: 1em">Heading</h1>

<p style="font-size: 1em; margin-left: 1em">And text for the paragraph.</p>

In IE, the heading will be indented more than the paragraph, even though
they both specify a margin of 1em. And although you could work around this
by using padding on the container to set the indent, getting consistent
results across browsers and on complex pages is nearly impossible.

I suggest that you think about what needs to change in size and what
doesn't. Raster images, for example, have fixed widths and heights. We
specify them in the img tag in pixels. This is not a problem. Similarly, if
I just want to move the text away from the border of the page, setting the
padding on the body to 5px shouldn't be a problem. Text, on the other hand,
should always be free to change size (a good reason not to use
text-in-images). But when my text doubles in size, do I need the gutter next
to it to double in size as well? Probably not. In fact, doubling the gutter
might even decrease the usability of the page.

And what about borders on elements? Is there any reason they can't be set in
pixels?

I use em or % for those things that need to vary in size, px for those that
need to stay fixed.

Charles F. Munat
Seattle, Washington
Received on Sunday, 6 May 2001 15:21:49 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:13:54 GMT