Vicki Stebbins wrote:
> So if anyone has a few mins to give me some thoughts on any
> accessible CSS problems or things to think of and if someone can tell
> me if this logic is correct:
>
> In the CSS
>
> body{
> font-size: 12px;
> }
> would translate through the styles as:
>
> div#container{
> font-size: 1.5em;
> }
> font size 18px for the container?
The logic is correct.
1.5em = 150% = 1.5 times whatever font-size you would have on an element
if you didn't declare any.
> Or do you have to put an em size in the body?
Rather not, as 'em' as base will trigger the 'em font-resizing bug'[1]
in IE/win. Starting with a font-size in 'percentage' is the safest way
to avoid that IE-bug _and_ keep font sizing somewhat cross-browser
reliable.
I recommend body {font-size: 100%;}.
Note that "base" doesn't have to be body. It can be html, body or a
wrapper further in.
> As soon as I get a page together I'll put it up and ask for a
> hammering to iron out any quirks... I really want to do this well for
> them and another one is in the wings to do the same.
>
> Hope a few people have worked on these issues.
For a few years, yes :-)
The only font-size quirks you are likely to find in today's browsers, is
that 'em' and '%' can give +/- 1px deviation between browsers because
they don't use exactly the same "tip-over" values when they re-calculate
to screen-pixels.
If you apply lots of up and down sizing down the chain of nested
containers, then the deviation _can_ become even larger than that for
the last element in the chain.
There's actually rarely any need to change font-size on containers, as
it is only the text-carrying elements that may need a declared
font-size. Keeping it simple will make any layout easier to style and
more reliable under stress.
I sent the following [off-list] yesterday, so I may as well copy it here...
-----------------------------
A basic list of...
body {font-size: 100%; /* don't change this */}
/* all values below are suggestions */
h1 {font-size: 145%;}
h2 {font-size: 132%;}
h3 {font-size: 125%;}
h4 {font-size: 115%;}
h5 {font-size: 102%;}
h6 {font-size: 100%;}
p, ul, ol, blockquote, pre {font-size: 100%;}
...will let all div-containers at 'font-size: 100%' = '1em' = 'default'.
By not changing font-size on containers, you can _size_ containers in
'em' or 'px' or '%', without losing the default. You can then also
calculate margins and paddings on containers in 'em' or 'px' or '%',
based on the same default.
-----------------------------
Since your subject-line mention "accessibility", you should take 'care
with font size'[2] and avoid using any absolute units - like 'px' or
'pt' - on font-size anywhere.
IE/win can't resize fonts declared in absolute units, but it can of
course 'ignore' all font-sizes you declare so you should keep that in
mind. Most other browsers can resize fonts no matter what, and most also
have options like 'minimum font size'[3] which will override any "too
small" font-size declared by web designers. One browser - Opera - even
have a 'maximum font size' option, which comes handy at times.
Hope the above is of some use.
I have more if you need it :-)
regards
Georg
[1]http://www.gunlaug.no/contents/wd_additions_13.html
[2]http://www.w3.org/QA/Tips/font-size
[3]http://www.gunlaug.no/contents/wd_1_03_04.html
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
