homepage Welcome to WebmasterWorld Guest from 54.234.74.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Responsive design using em or px
toplisek




msg:4571552
 2:24 pm on May 7, 2013 (gmt 0)

I'm testing [twitter.github.io...]

and need to know how is influenced em or px inside this framework.

Example:
px for top and bottem and % for left and right. Meaning the width is adjustable and the height will be a fixed height...
This is just example as responsive design is different:
Generally, don't use px for responsive layouts, I guess.

Solution:
I will use percent on the body element (body { font-size: 62.5% or 100%; }), and then use the em unit to size it from there.

1. What will be than other units like
padding_/margin/border size/line-height...

2. Can I use em for fonts size and padding/margin with px or it is not correct way to set layout and I have to use all the time em for font size and also for padding_/margin/border size/line-height...

 

DrDoc




msg:4571587
 3:38 pm on May 7, 2013 (gmt 0)

It is good practice to:
- set body font-size to 100% (this clears a bug in IE)
- set all subsequent font-size using em
- set line-height as a multiplier of the font-size (i.e. 1.2, 1.5, 2, etc -- no units)
- set border-width using px (this avoids imbalanced borders due to rounding errors)
- set padding/margin to px/em/% as desired (if you need an exact measurement, use px; if you need an approximate measurement, use em; if you need a rough measurement, use %)

lucy24




msg:4571654
 8:04 pm on May 7, 2013 (gmt 0)

It sounds perverse, but even percentages need to change.

In a browser, margins of up to 10% can be nice. (Look at the present page.*) Drop down to tablet size and you're wasting real estate if you take that much horizontal space out of action; continue down to phone size and you'll want hardly any margin at all. It may be relevant that with smaller devices-- tablet or phone --there is no window, but the device itself has a physical "margin" outside the text area. This becomes part of the viewing experience.

When setting font sizes, 1em = 100%. So you can use whichever form is easiest for you to read and remember.


* Got a nasty feeling I've looked this up before and forgot. The entire page is a table ::cough-cough:: with width of 85%, meaning that the side margins are 7.5%.

DrDoc




msg:4571691
 11:00 pm on May 7, 2013 (gmt 0)

When setting font sizes, 1em = 100%. So you can use whichever form is easiest for you to read and remember.

I, respectfully, disagree:

  • Always, always use 100% the first time you define font-size -- This avoids a pretty nasty bug in older but still-in-use versions of Internet Explorer
  • Always, always use em for anything that will-or-may affect tables OR explicitly declare the following before declaring any percentage based font-size (other than 100%): table, caption, thead, tbody, tfoot, tr, th, td { font: inherit; } -- This avoids several sizing bugs, mainly in Internet Explorer, but occasionally in other browsers as well.

    Rather than figuring out how to avoid individual bugs or how to "fix" a nasty bug, by following the advice of using 100% for body and using em elsewhere you spare yourself from head aches.

    In a browser, margins of up to 10% can be nice. (Look at the present page.*) Drop down to tablet size and you're wasting real estate if you take that much horizontal space out of action; continue down to phone size and you'll want hardly any margin at all. It may be relevant that with smaller devices-- tablet or phone --there is no window, but the device itself has a physical "margin" outside the text area. This becomes part of the viewing experience.

    Sound advice! However, many/most don't know how to do this. But, yes, the whole layout (not just margins) needs to be modified explicitly for tablets and smart phones.

  • lucy24




    msg:4571701
     11:29 pm on May 7, 2013 (gmt 0)

    Part of my boilerplate is
    table {font-size: inherit; font-family: inherit;}

    I don't remember which specific browser prompted me to add this line-- except that it can't have been MSIE. I only remember noticing that tables didn't always look the way I expected. Now, apparently very old versions of MSIE don't understand the word "inherit" ... but you gotta draw the line somewhere. (I don't remember where I learned this either. Can't find it in caniuse dot com.)

    Sometimes I also add
    img {text-decoration: none;}
    for similar browser-specific reasons. If you use an image as a link, Camino will outline the image using the same color as ordinary text links. I don't think any other browser does this-- and sometimes I like the effect, so I don't mess with it. (But I don't add it explicitly so other browsers will see the same thing. I expect it; they don't.)

    Does it have to be "100%" as opposed to the third option, "medium"?

    [edited by: engine at 8:42 am (utc) on May 8, 2013]
    [edit reason] fixed typo [/edit]

    DrDoc




    msg:4571714
     1:28 am on May 8, 2013 (gmt 0)

    a img { border: none; text-decoration: none; }

    A surprising number of browsers have issues with fonts in tables. In fact, I can't think of a single one that handles them absolutely right. Most font issues are solved with your example -- inherit on the parent table. But to ensure that more complex tables are handled right, you still need the more explicit inherit rule.

    As for older IE -- I draw the line at 7 or 8, depending on the site.

    drhowarddrfine




    msg:4571863
     2:34 pm on May 8, 2013 (gmt 0)

    I don't think any other browser does this
    IE does.
    Fotiman




    msg:4571888
     3:47 pm on May 8, 2013 (gmt 0)


    This avoids a pretty nasty bug in older but still-in-use versions of Internet Explorer

    Which versions?

    DrDoc




    msg:4571948
     5:57 pm on May 8, 2013 (gmt 0)

    Which versions?

    It's really bad in IE7 and older, mostly fixed (although still present) in IE8, and completely fixed in IE9.

    Fotiman




    msg:4571977
     6:34 pm on May 8, 2013 (gmt 0)

    Thanks. IE7 has less than 1% market share, so in my opinion shouldn't be explicitly designed against (and ditto for anything older than that). Your mileage may vary, of course.
    I wasn't aware of any specific cases in IE8 though.

    lucy24




    msg:4571998
     7:26 pm on May 8, 2013 (gmt 0)

    Is it really a bug or--
    har har, yuk yuk--
    a feature? Does it do something basic like throw all tables into 80% sans-serif, or something worse?

    IE does.

    Oh, how goofy. That means most people on That Other Platform see my gallery pages the way I do-- but Mac and Linux users don't :)

    DrDoc




    msg:4572012
     7:51 pm on May 8, 2013 (gmt 0)

    Yeah, IE7 isn't really a problem nowadays unless your particular target audience is different from the "average".

    IE8 has the occasional issue tied to inherited font sizes in tables, along with setting a %/em based font size using JavaScript. It doesn't always trigger, however, and I have never felt motivated enough to figure out the exact ifs and whens ... I just know that 100% on body followed by em elsewhere (including in JavaScript) has never triggered the buggy behavior in IE8.

    As for border -- to my knowledge, all "older" browsers (and some newer) exhibit that behavior.

    Global Options:
     top home search open messages active posts  
     

    Home / Forums Index / Code, Content, and Presentation / CSS
    rss feed

    All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
    Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
    WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
    © Webmaster World 1996-2014 all rights reserved