SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Location
    Sussex, England
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font size, accesability and tables

    I am trying to make my new site accesable by using % based font styling and having problems with tables.
    I have set the body to 100.1% and then used em's to define the size of other selectors.
    I set table to .8em, this looks fine in FF and Opera, but IE shows it smaller than any other .8em text on the page.
    If I change table to 1em it looks fine in IE but too big in the rest.

    I have scoured the source code from dozens of respected sites and can't see how anywone fixes this problem. I have been surprised how many are still using px for size.

    There also seems to be 2 camps on base size:
    Start with body at 100% or about 70% and then resize from that base, any views on the best choice?

  2. #2
    SitePoint Evangelist tetsuo shima's Avatar
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Strictly speaking, it's an abuse to use ems to set the size of other elements than fonts. To make a long story short (and I won't go into specifics), an em represents the size of the "m" letter. Therefore, it makes sense only when it relates to a given font.
    Percentages, on the contrary, can relate to pretty much anything appearing on a web page. Plus elements whose size is defined in percentages also resize.

    Back to your problem, browsers have strange ways. You could pass other settings to ie only, but my advice is that you don't care too much and live with browsers discrepancies.

    Did you get rid of all the possible defaulty added spaces by the way?
    Code:
    * {padding:0;margin:0;}
    The SEO Faq thread
    Dependency injection made easy: Phemto

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Location
    Sussex, England
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found part of the problem.
    The table was wrapped in a paragraph tag, so IE was setting the table size as 80% of its parent which was 80%. Firefox doesn't do this. I removed the P tag and it looks the same in both.
    I only use EMs to size text elements, I use % for the rest.

    My investigations showed a massive difference of opinion in how font sizes should be set. I am still not sure if for maximum accesability it's best set the base font at 100% then reduce it in P tags etc. or set it at 70/80% and increase it in other tags.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tetsuo shima
    Strictly speaking, it's an abuse to use ems to set the size of other elements than fonts.
    I definitely disagree with that statement!

    An 'em' is a very useful unit whenever you want to specify a size that should vary with the base font size. For instance, specifying the width of a 'column' (whether in a table or a DIV etc.) is preferably done in 'em'. Using a fixed width such as 'px' is a very bad choice, because if the font size is increased enough you'll get text overflowing the container. It may not be too much of a problem in a language like English, which has mostly short words, but in languages such as Swedish or Finnish it will lead to usability problems very quickly. Margins and padding of text containers are other things that are best expressed in 'em'.

    Quote Originally Posted by tetsuo shima
    To make a long story short (and I won't go into specifics), an em represents the size of the "m" letter.
    Almost right. The typographer's 'em square' was the width of an uppercase 'M' in a given font.

    Quote Originally Posted by tetsuo shima
    Therefore, it makes sense only when it relates to a given font.
    That's true in traditional typography, but not in CSS. CSS defines an 'em' to be equal to the font size (regardless of how the 'M' glyph looks – or even if there is an 'M' glyph in that font).
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Evangelist tetsuo shima's Avatar
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tommy,
    thanks for the very useful addition. Coming from traditional typography, I sometimes need some heads up regarding the web pages specifics.
    Quote Originally Posted by AutisticCuckoo
    An 'em' is a very useful unit whenever you want to specify a size that should vary with the base font size. For instance, specifying the width of a 'column' (whether in a table or a DIV etc.) is preferably done in 'em'. Using a fixed width such as 'px' is a very bad choice, because if the font size is increased enough you'll get text overflowing the container. It may not be too much of a problem in a language like English, which has mostly short words, but in languages such as Swedish or Finnish it will lead to usability problems very quickly. Margins and padding of text containers are other things that are best expressed in 'em'.
    In what way are percentages different?

    Quote Originally Posted by AutisticCuckoo
    Almost right. The typographer's 'em square' was the width of an uppercase 'M' in a given font.
    Uppercase, of course.

    Quote Originally Posted by AutisticCuckoo
    That's true in traditional typography, but not in CSS. CSS defines an 'em' to be equal to the font size (regardless of how the 'M' glyph looks or even if there is an 'M' glyph in that font).
    Ok I wasn't aware of this. Thanks for the head up.

    Cheers
    The SEO Faq thread
    Dependency injection made easy: Phemto

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tetsuo shima
    In what way are percentages different?
    For font sizes, 'em' and '%' are more or less interchangeable. They are both relative to the font size of the parent element. font-size:1.1em is equivalent to font-size:110%.

    When used for element dimensions, 'em' and '%' are very different. Dimensions in 'em' are relative to the element's font size. Dimensions in '%' are relative to the corresponding dimension of the containing block.

    The same principle applies for margins and padding. Percentages are relative to the width of the generated box's containing block. Note that it's relative to the width even for margin-top/margin-bottom and padding-top/padding-bottom!
    Birnam wood is come to Dunsinane

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Note that it's relative to the width even for margin-top/margin-bottom and padding-top/padding-bottom!
    Are you sure about that? I know that percentages are relative to the height when you're talking about positioning (relative or absolute), so I had always assumed that the same applied to margin and padding.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Are you sure about that? I know that percentages are relative to the height when you're talking about positioning (relative or absolute), so I had always assumed that the same applied to margin and padding.
    The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
    -- http://www.w3.org/TR/CSS21/box.html#margin-properties
    Simon Pieters

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Are you sure about that? I know that percentages are relative to the height when you're talking about positioning (relative or absolute), so I had always assumed that the same applied to margin and padding.
    It's quite odd, and – as Simon posted – the W3C are aware of this oddity and explicitly emphasise this fact in the CSS spec.

    I haven't tested how different browsers handle this, but OTOH I don't think I've ever used percentages for vertical margins or padding.
    Birnam wood is come to Dunsinane

  10. #10
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    I haven't tested how different browsers handle this, but OTOH I don't think I've ever used percentages for vertical margins or padding.
    I've seen it being used more than once, for instance on hicksdesign with "styling off". When you think about it it's quite logical that they depend on the width rather than the height. Consider the following rule:
    Code:
    body { margin:5%; }
    ...in a long document. If margin-top was relative to the height of the containing block, the user probably had to scroll several screens before she got to the content. Also, it makes sure that margin-top and margin-right are the same; otherwise it might have looked a bit wierd.
    Simon Pieters

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's logical. Also, if the margins depended on the height of the containing block, you'd have to download the entire document before rendering it. (That may be a non-issue for most of you, but not for us on dial-up. )
    Birnam wood is come to Dunsinane

  12. #12
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    Yes, it's logical. Also, if the margins depended on the height of the containing block, you'd have to download the entire document before rendering it.
    Why? You could render the document incrementally anyway (although the margin would change while the document loads).
    Edit:

    BTW, i have a feeling that this is starting to go slightly OT
    Simon Pieters

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan
    Why? You could render the document incrementally anyway (although the margin would change while the document loads)
    You're right, but that'd be rather annoying, wouldn't it?
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Evangelist tetsuo shima's Avatar
    Join Date
    Oct 2005
    Location
    Switzerland
    Posts
    597
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the heads up. When you think about it, it's logical. You often calculate the text area based on font size, so an adaptative area is something that makes sense.

    The SEO Faq thread
    Dependency injection made easy: Phemto


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •