#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    88
    Rep Power
    10

    CSS em calculator


    I am having problems understanding the rules of CSS' em rules

    Em calc to try understand how to calculate the dimensions needed for my website, but I can't understand how this would affect everything else like the width or height of a photo that is being display for a more responsive website
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    It seems a lot easier (to me at least) to use Firebug or a browser's built-in Developer Tools to check what the computed font-sizes are.

    You've just got to remember that any time you set the font-size to something other than "100%" or "1em" that the pixel value for "1em" will be different from the parent and any sibling elements.

    While you can use elastic layouts for responsive design, I prefer to use fluid layouts.

    Here are two articles on the difference between the types:
    Fixed vs Liquid vs Elastic
    What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?

    As to photos, are you setting their dimensions in EMs? If so, then they'll scale according to the font-size that the <img> element inherits (I'm assuming you don't set a font-size on the <img> themselves). For responsive designs, I more often give "max-width:100%" to <img>s and let them scale as needed than to explicitly set their dimensions in EMs.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    88
    Rep Power
    10
    I can't use the max-width property on the image, because it would ruin the dimension of the page
    Last edited by cssbonding; September 18th, 2013 at 02:18 AM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4303
    Ah. You're setting dimensions for the <img> then. In that case, you simply would need to set the width and height to auto in the same rule you set the max-width.

    How to proportionally scale images that have dimension attributes

    Don't assume I can't suggest a solution to a problem, just because I didn't already.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    88
    Rep Power
    10
    meh, just noticed that the link is giving wrong calculations for the px to em, I put in 1000px and it came up with 62.50em which is wrong, its suppose to be 71.50em

    EDIT: ooops, didn't see something, its related to font size
    Last edited by cssbonding; September 20th, 2013 at 03:21 PM.

IMN logo majestic logo threadwatch logo seochat tools logo