At 03:02 PM 5/09/2007, Gunlaug Sørtun wrote: >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
Hi Georg, Many thanks you and Felix have really helped with this font sizing thing. As I said to him I think 'the penny is dropping'. Have you done any CSS aimed at braille readers? If so is there some 'gotcha' with this? I'm thinking % divs for the navigation and the layout is side nav so when the font resizes it can have more room to move? Regards Vicki PS It's all maths to me and unfortunately I 'glaze over' with maths and need to really concentrate and think hard... ______________________________________________________________________ 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/