SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: Pixels vs Ems

  1. #1
    SitePoint Member
    Join Date
    Oct 2001
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pixels vs Ems

    The pixels vs ems debate has been going on a long time where I work. I just want to find out if other people been through this and how they solved it. I'll try to be as brief as poss...

    I've been working on a site which uses ems to define font size. We did this as our site needs to be accessible and pixels aren't accessible as users can't zoom in to see the text, except in newer browsers.

    We have had users of our website complaining that the font size is too small, even though it looks fine on all the machines here at work, both PC and Mac.

    We have had other problems as well with ems, especially the inheritance thing, where text gets progressively smaller as you add nested tables. And since we have defined the font size in the P tag, if you accidentally surround a bit of text with <P> as well as a class, the effect on the text is compounded (it seems to apply both sizes making the text horribly small). This wouldn't be a problem if we were editing the pages ourselves, but its the client who has to do it, and they don't have as much knowledge about these issues as we do.

    So, my questions are: if the W3C (among others) are telling us we have to use ems, then why is everyone else still using pixels? After the hassles we've had, I guess its because ems are far from perfect. I have only found a couple of sites using ems, and not very successfully.

    Also, does anyone know of any good websites that acknowledge the problems with ems, instead of just saying how great they are, and offer solutions?

    Cheers,
    /Ange

  2. #2
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the w3c saying we have to use ems??? Wow I never got any errors. But I do say I always use px for everything. Just my thing, I have experimented with pt but I didn't lik the way things turned out.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Pixels vs Ems

    Originally posted by edlaagn
    Also, does anyone know of any good websites that acknowledge the problems with ems, instead of just saying how great they are, and offer solutions?
    I thought ALA did something on that a while ago, but I'm too strapped to find it.

    Obviously, em is the preferred way, but because of the browser inconsistencies in using, most people use px. If you find a way to get it to work (not necessarily perfectly, though), use ems, if not use px. Another option would be to have both options (again look to the ALA site) with a style sheet switcher.

    One of the beauties of CSS is that people can override what you say if they really need to. :-)

    ~~Hope This Helps

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Designers are the ones using px as their measurement. The difficulties with enlarging text are secondary to their desire to have their design look "just" like it does in Photoshop.

    I would use em but for the bug that you pointed out, the inheritance issue. Most of the time I use pt. I'm willing to accept a few minor incosistencies with text size as very few of the sites I design have areas where text size could break the design.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use relative naming to define font sizes, e.g. x-small, small, medium, large, x-large, etc. Then you'll have no problems!

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Pixels vs Ems

    An issue dear to my heart. As you seem to be aware the problem is the use of nested tables for design. Assuming that you do not want to change the use of tables in existing sites, and assuming you are not using fixed width tables, and bearing in mind I dont have some example code to work with, here is how I would attack the problem:

    It does not have to be pixels or ems, or any other unit. Keep in mind that the use of relative font size is to help the user view your content in an easy manner. If ems dont work for you, dont use them. In fact for content dont use font size at all. If you absolutely have to control font size,
    .content {
    font-size:100%
    }
    In the content area, use the H1, H2 etc to set off or lead in your information instead of spans. In your paragraphs (how did we get paragraphs in table cells anyway?) use <p ID="xxx" CLASS="yyy"> or <td ID="xxx" class="yyy"> where
    #xxx is used to define positioning and containment elements such as width, line-height, margin, padding, text-indent,
    .yyy is used for your appearance elements such as font-family, color, background color, font-weight.

    This also has the added bonus of enabling your clients to only have to change class (appearance) elements, instead of messing with the other elements which affect your layout.

    Use pixels in other areas if you want. Banners, footers, copyrights, all that stuff. only worry about allowing the user to control the font size of the content.
    Navigation and text links is a little different story. You can use pixels here, if you provide an alternative.

    One way to do this is use a roll-over, but instead of another useless color or image, use a larger text size and here you could use your ems, or %, or even set a larger px or pt. (at least 16)

    Another way is to use a show/hide script for the rollover, but show/hide a div that contains the larger links. Absolutely position it so that it shows over your default navigation, and it wont affect your layout. Play with its size and position so that it doesnt cover any content, and put a "close this window" link at the bottom. (it has to stay on the screen so people can click on the links)

    an added bonus here is that for older browsers another set of links are at the bottom of the page. where you have the div defined.

    My point is, there are ways to empower the user and keep your tables. The key is to realize it is not all relative or all fixed. Fix the design enclosure and free the content inside. (no fixed table width for the content) and provide alternatives for the links and navigation.

  7. #7
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My five penneth ...

    OK, I've had these kind of battles before, and this is what I do. It seems to work, but might be too kludgy for some of the purists out there.

    I use a base style sheet, which uses percentages for all font sizes. I never use pt (because it depends on screen resolution), and I never use pixels because these cannot be overridden by the user.

    So, why not ems? Can't remember quite rightly! All I know is that it didn't seem to work properly on all browsers. However, percentages do, but only if yo are prepared for a a few tweaks.

    So, specify percentages, testing all the way on your most used browser (or rather the browser that most of your clients use - probably IE5). Get it right there. Then, when you are happy with the results, view in other browsers - Yikes! What's gone on?!

    Time to introduce your friendly browser-specific-tweaks.js file >>>

    Having identified the browser type, overwrite any errant size attributes within this tweaks file. This has ALWAYS worked for me. It means that the majority of the style attributes (colours, layouts, fonts) can still be set in the big base style sheet, while the tweaks file takes care of browser specific sizing issues. You still have site-wide change capability through CSS, folks!


    The downside, as mentioned already, is that percentages can compound. This can be avoided, however, by using unique classes that you know will not be nested, and avoiding using percentages in generic HTML selectors. For example:

    DIV {
    font-size:70%;
    }

    ... just wont do. Every nested DIV will create smaller text.

    As an example, here's just a snippet from one of my style sheets that sets a base font size and other elements' sizes:

    /***********************/
    /* Generic elements */
    /***********************/

    BODY {
    margin-top:0px;
    margin-left:0px;
    }
    BODY, TD, TH, SPAN, DIV {
    /* Sets the default font for EVERY element */
    font-family:Verdana,arial,helvetica,sans-serif;
    color : #31659C;
    }
    BODY, TD, TH {
    /* Base font size */
    font-size:75%;
    }
    .smallDDL {
    font-size:90%;
    }
    .subHeading {
    text-indent:5px;
    font-weight:bold;
    font-size:120%;
    color:#fefee8;
    }
    etc etc.

    You may need to up and down fonts later in your CSS.

    In the tweaks file, you might see something like this:

    document.write("<style><!--");

    /* ========= N O T N A V 4 ! =============*/
    /* Put all the things that break
    horribly in Netscape 4 in here! */
    if (!is_nav4) {
    document.write('DIV.legalText {font-sizex-small;}');
    document.write('DIV.mainContent {margin-top:8px;margin-left:15px;}');
    document.write("DIV.legalText {width:100%;}");
    }

    /* ========= N A V 4 ==========================*/
    /* ========= {dontcha just love it?} ==========*/
    if (is_nav4) {
    document.write('H1 {font-size:145%;}');
    document.write('H1.L1intro, .L1intro {font-size:95%;}');
    document.write('H1 STRONG {font-size:95%;}');
    document.write('H2 {font-size:80%;}');
    document.write('.permaLinkBar {font-size:65%;}');
    document.write('.bodyText {line-height:110%;}');
    document.write('.mSpotLink {font-size:80%;}');
    }

    Like I said, this approach works for me, and I test in Mac and Win, N4, N6, IE4+ and Opera 5+

    What do people think? Like this approach? Fill you with dread?
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  8. #8
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: My five penneth ...

    Impressive. Quite a few peole won't appreciate it because I find a lot of hard core server sided users scoff at client side work due to the users ability to turn it off. But I like it. When I stop doing intranets and have to start worrying about cross-browser compatiblity that idea will be in my head.

    Of course with all that work you could have simply had several different style sheets for different browsers. Then you don't have to manipulate the Dom as much.

    I actually just tried ems for the first time tonight on a small project I am working on. In IE it is very nice and very easy to control the size. This thread helped me to it. Thanx
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  9. #9
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could equally use server side scripts to do the same thing, but I make the assumptions that this facility may not be available, particularly to people using free web hosting.

    Also, I assume that if people are switching off JavaScript, they know that this comes with consequences, one of them being a slightly less rich browsing experience. It's still not a showstopper.

    BTW, I prefer to use server side browser detection to dynamically write the STYLE attributes, wherever possible:

    <STYLE>
    <% If ntsp4 then %>
    /* ============> N E T S C A P E 4 */
    .bodyText {font-size:smaller;}
    .mailingAddress {
    font-size:14pt;
    display:block;
    }
    .mailingAddressOnScreenNote {
    display:none;
    }
    <% End If %>
    </STYLE>

    and so on ...

    This way, if JavaScript is disabled it still works. All depends on what you have to play with really.
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  10. #10
    Posts rarely lloydi's Avatar
    Join Date
    Jan 2002
    Location
    Swindon UK
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alternative you mentioned was to alternative style sheets for different browser. In my experience, caused too much of a headache to update - 8 or 9 very similar stylesheets that all need to be updated ... no thanks!

    Definitely recommend this approach of one base sheet + corrective tweaks on top.

    PS - I never worry about the DOM - I simply avoid DHTML widgets and so on!
    Build Your Own Web Site the Right Way!
    A beginners' HTML/CSS book with web standards at its heart
    The Ultimate HTML Reference
    A complete reference, in glorious hardback

  11. #11
    Anyone seen my cypher? OneChance's Avatar
    Join Date
    Apr 2001
    Location
    Seattle
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a good article about how to use PHP to detect browsers and display the appropriate styles while using one style sheet.

  12. #12
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lloydi
    [B]You could equally use server side scripts to do the same thing, but I make the assumptions that this facility may not be available, particularly to people using free web hosting.
    I actually started off learning javascript. But I have replaced almost all of my coding with PHP. It is simply better and requires no cross browser 'hacks'. So I tedn to do most detecting on the server side myself
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2001
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    better explanation of problem

    To set the same font settings across all elements of the page it should
    ideally be enough simply to set the font on 'body', and let it inherit
    into all the document elements inside.

    This doesn't happen in Netscape 4 because fonts don't inherit into or through
    tables, so many people use a workaround like the selector you posted, to slap
    font settings over more or less everything. It's a bit ugly but works,
    except that you can't use 'em' or '%' font-size units. They're relative to
    their parents, so by applying them across the board you are likely to get
    nested font-sizes, which will cause confusion, especially where tables are
    involved, since some browsers will inherit into tables and some not, argh.

    The other browser that doesn't inherit font-size into <table> is IE/Win
    (emulating one of Netscape's bugs!). Luckily you can turn this off by
    saying:

    table { font-size: 1em; }

    and then IE/Win will work the same as Op, Moz, Konq, IE/Mac etc., and you
    can happily set a single font-size on 'body' and have it inherit
    consistently on all but N4.

    There are other workarounds if you need to use relative font sizes and
    tables in N4, but they're not quite as clean.

    this was posted by andrew clover in a css newsgroup

    stevo


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
  •