Accessibility

% and px

[SofterLogic UK]

CSS supports defining widths and positions etc using px perfectly well, however, Web Content Accessibility Guidelines 1.0 say that only % should be used. As you are aware no doubt, this really contradicts the use of position:absolute; method layout.

Where tables are used for layout (urgh!) then % can work well.... but not with positioned DIV elements.

Do any of your have a way around this?

[gohankid77]

em works better than % IMHO. 1.00em = 100%
% and em units are both calculated based on the dimensions of the parent element. % doesn't work with height, but em does. ems are IMHO easier to work with when coding for accessibility.

[edited by: gohankid77 at 4:29 pm (utc) on Oct. 13, 2004]

[photon]

You can position and size DIVs with percentages as well.

[edited to add]

em works better than %. 1.00em = 100%

For fonts yes, but not for the width of a div.

[edited by: photon at 4:17 pm (utc) on Oct. 13, 2004]

[Bonusbana]

Doing layout in % and em can really bring some new experiences to the web design world, just have a look at the new mozilla homepage and try enlarging the text.

On the other hand - I found that it is wise to use em and % for font sizes and line-heights, because that's where accessability and readability becomes the most critical. Positioning and layout are still done best in px IMO, but I'm not sure everyone agrees about this.

[createErrorMsg]

I found that it is wise to use em and % for font sizes and line-heights, because that's where accessability and readability becomes the most critical. Positioning and layout are still done best in px IMO, but I'm not sure everyone agrees about this.

I agree with this 100% (or 1000px). FOr font sizes, EMs are best since it allows resizing.

If you set the base font (in the body tag) to 62.8%, it makes 1.0em elsewhere in your document equal to 10px. This makes sizing calculations easy. If you want 12px, its 1.2em. 20px? 2.0em, etc.

In cases where I want a container to expand with the text (like a css nav button) I size width in em's, too, but I always keep the overall page size (wrapper div) explicitly widthed in px.

Maybe I'm just a control freak, but it makes me nervous to think someone could reset their resolution and max out their browser and see a whole paragraph of my text on one line...

[jo1ene]

Maybe I'm just a control freak, but it makes me nervous to think someone could reset their resolution and max out their browser and see a whole paragraph of my text on one line...

No. This is a normal concern. The real issue of relative v. absolute comes up in two places.

(1)Text size is one area where it is helpful to your users if they can changes the font's size for readability.

(2)Also, you don't want to hard code anyting so it hangs off the side of a 800px width resolution. (I gave up on 640 long ago.)

Other than that, it's not a big deal to set column widths or positions with absolute values.

[Bonusbana]

If you set the base font (in the body tag) to 62.8%, it makes 1.0em elsewhere in your document equal to 10px.

This is true, but also not true. Pixels are absolute, no matter what browser or preferences you use. EM's and % are always relative. That means that f.e in safari, the default text size is smaller than IE, so if you use relative text sizes, they will all be slightly smaller.

If you use opera6 for mac, their default font-size is much larger than IE, so you will see larger fonts there.

In general, it is wise to give the user power to control his or her text size by using relative sizes, but if you are doing very complex layouts based on "print" methodology, it could be wise to use pixels instead.

[createErrorMsg]

This is true, but also not true.

Bonus, you make a good point. And, thinking about it, different fonts have different base sizes themselves, so it's probably not even entirely true on any browser.

It can be difficult, however, to guesstimate exactly how big 1.7em is going to turn out on your page ina given font. I find being able to relate my relative sizing to an absolute size (I have a clear idea in my head of how big 10px or 12px or 30px are) helps me make decisions while writing the stylesheet and minimizes the "peek'n'tweak" stage of style editing.

Although 62.8% isn't a guaranteed equivalent for 10px (and may not even EVER be an equivalent), it IS pretty close and does a decent job of giving me the illusion of control while using relative sizing.

[natto]

We've just redesigned our company (UK utility company) website using XHTML/CSS and have used ems to control the width of elements just as CreateErrorMsg described.

We've found this to be very useful because the containers expand with the text when the user increases font size. This avoids line length problems.

We've tested this in the following browsers and have found no problem with it (we use 62.5% as a base, instead of 62.8% but I don't think there's much difference):

PC/WIN:

IE5
IE5.5
IE6
NS6.2
Mozilla 1.7
Opera 7.5
Firefox 0.9

MAC:

IE5 (OS9)
Safari (OSX)

[SofterLogic UK]

Thanks for all your advice - I am certainly going to try using these em units (however, I don't quite get how they differ from %, but I'm working on it).

[createErrorMsg]

however, I don't quite get how they differ from %

% is a percentage relative to the parent element/item/object. So an 80% wide wrapper div inside the <body> is 80% the width of the browser window. Alternately, an 80% font-size is 80% the base font size (unless it's a child of another element with a % font size, in which case it's 80% of THAT font size).

EM is a size relative to the base font size, even when used for sizing widths or heights on <div> elements. 1.0em = 1 X base font size. 2.0em = 2 X base font size. Etc, with decimal increments in between. (At least that's how I understand it!)

[photon]

And in case you're wondering, an em is the width of a capital M in a given font--hence the name. Ditto for the width of an em dash (i.e.,

—

).

So not only will your measurements vary with font size, but also with font family. Important to remember if you're mixing fonts on a page.