SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Converting em to pixels

    Hi,
    I wanted to convert all the units of one of my projects to either percentages or pixels and I was wondering what the conversion between em and pixels are.

    Here is my understanding that 1.0 em is the letter em at 16 pixels.
    So, am I correct in assuming that, 1.6 em is equal to 1.6 * 16 pixels, which is 25.6 pixels?

    Also, isn't it impossible to use less than a whole pixel, so what would you recommend in the case that I want an element's heigh to be 25.6 pixels?

    Thanks in Advance,
    Team 1504

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    1 em is defined as the text size of the browser. The fact that (most) browsers are by default set to 16 px does not mean that 1em=16px. It's not.
    em, like percentages are only defined relatively, not absolutely. That is the very reason percentages and ems are recommended over px in web design; if I have set my browser to a larger text size than the default, your website should also be a bit bigger than the default.
    Of course there are some situations where this is impractical, but as a general rule of thumb you should stay clear from px.
    At least that's my opinion.
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,785
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Most modern screens don't have 16px equal to 1em. They have a wide range of different values depending on the screen. 16px was common at one point but even then it wasn't all that common.

    The conversion is somewhat similar to asking how long is a piece of string. Or how to convert between oranges and apples.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    think of ems as a variable. 1em= font size, in px, of the container element.

    if you srat with a div, whose font size is set to 20px, inside that div there is a P whose font size is 50% ( or even .5em) THEN the value 1em for any tag INSIDE that P will be 10px.

    20px(1em inside div) * 50%= 10px ( =1em inside div p)

    So you have to follow the values of the text throught the cascade in order to know what 1m is equivalent if you like that 16px starting point you could set HTML{font-size:16px;} That creates a consistent starting point for all browsers, but it also means all your other tags change proportional to this, so you have to be careful.


    BTW, there is no such thing as a half pixel. so if you calculations lead you to a measure like 12.6 px, it is best to allow for some wiggle room in the design as some browsers will round up some will round down and some will show behavior which will make you wonder if the programmers even bothered to get a GED before they applied for work at M$....

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ahh okay. Well then I guess I will keep the units at em then.

    However, the one propagating force against not using em's was the invalidity in the W3C validator.

    Is there a way to convert between ems and percentages or is that like green and red apples?

    Also, personally, I prefer hybrid layouts that use px and %(or other relative units) when necessary. Another thing I favour is min and max dimensions in pixels so that I can exhibit some control over the wireframing /layout of my page.

    Another reason why I do not like soley %'s is because of the possibility of being maximised on a huge resolution composed of multiple monitors. Although this would rarely happen, I do not want to take the risks of my text being stung out in one line.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    when applied to an element's width, ems are percentages. Except the percentage is based on the base font size rather than the container elements width. It's not to much about comparing apples to apples is using the right tool for the right job to begin with.

    When you think percentages, you are basing your calcs on the parent, but when you are using ems, to a degree, you are thinking content.

    When talking fonts-size.. ems and % are essentially the same font-size:2em and font-size:200% do the same thing.

    it seems that what you want to do could be accomplished with min/max width



    hope that helps

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It did help a little, but what I am using the em as the unit for the line-height for a horizontal list that in a way determines the height of the container of that horizontal list.

    It is this way because the container only contains those list items.

    When I was validating said page, I saw that the W3C validator did not recognise or recognised the em unit an invalid.

    So I was looking for what other unit could I use for the line-height:1.6em; to maintain the dimensions of the horizontal list container with valid units.

    I hope that helped explain what I am trying to achieve more. I apologise if I am being confusing, but please let me know if you have any questions or confusions.

    I really appreciate all the help!

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    You can use line-height "unit-less" so to speak: line-height: 1.6;
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Scallio beat me to it. Line height is a proportion or a fixed number. In essence it demonstrates what I said about ems being a ratio. Line height 1=1em or 100%.. I never realized W3C wouldn't validate if you used em or percentages but maybe they are just saving you some extra typing? lol

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    At first I was like oh wonderful! But, then I realised I also have the height set to 1.6em.

    So I misspoke when I said the line-height acts as the height Both line-height and height are set to 1.6em.

    So taking Scallio's advice and I removed em. This gets rid of the error for the line-height attribute, but causes one for the height attribute because height needs units. And I can't use ems, so what other unit and value should I substitute it with?

    Any suggestions?

    Edit:
    Quote Originally Posted by dresden_phoenix View Post
    Scallio beat me to it. Line height is a proportion or a fixed number. In essence it demonstrates what I said about ems being a ratio. Line height 1=1em or 100%.. I never realized W3C wouldn't validate if you used em or percentages but maybe they are just saving you some extra typing? lol
    hmm so would
    Code CSS:
    line-height:1.6;
    height:160%;
    be sufficient and equal to 1.6 em for both attributes then?
    Last edited by team1504; Apr 11, 2011 at 13:19. Reason: Taking dresden_phoenix 's concurrent post into consideration

  11. #11
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by team1504 View Post

    Edit:


    hmm so would
    Code CSS:
    line-height:1.6;
    height:160%;
    be sufficient and equal to 1.6 em for both attributes then?
    Oh No, another Edit.
    I tested it and just realised that dresden_phoenix's conversion 1em = 1 = 100% only works for the line-height attribute.

    So I guess we are back to the original question before any of the edits

    Instead of 1.6em, which is invalid, or 1.6, which is not possible, for the height attribute, what other unit and value should I substitute it with?

  12. #12
    SitePoint Member
    Join Date
    Apr 2010
    Location
    Bristol, UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which validator are you using which says that em units for height is invalid?

    I tend to use ems much more than any other unit unless I have fixed width images so that as much as possible all the elements are relative to each other.

    I just tried the following through the W3C Unicorn validator and it came out fine, are you sure you don't have a different error above the statement which is causing the error?

    Code CSS:
    div {
    line-height: 1;
    height: 150%;
    background-color: red;
    margin-bottom: 1em;
    }
     
    span {
        height: 2em;
        line-height: 0.5;
        background-color: green;
        display: block;
    }

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    team1504 meant; line-height verses height and the fact line-height doesn't strictly need units - I suspect the sentence got slightly muddled.

  14. #14
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by team1504 View Post
    hmm so would
    Code CSS:
    line-height:1.6;
    height:160%;
    be sufficient and equal to 1.6 em for both attributes then?
    Nope

    Setting a percentage on an element dimension sets it relative to the parent element. So if you have width:50%, it makes it half the width of the parent element; if you have height:160%, it makes it 1.6 times the height of the parent element.

    There's nothing wrong with having height:1.6em, which would set it to the size you want, although I think in this context you might be better to leave it off altogether. The problem is if the text runs onto a second line, you've got a fixed height that isn't enough for the second line.

  15. #15
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Becky84 View Post
    Which validator are you using which says that em units for height is invalid?

    I tend to use ems much more than any other unit unless I have fixed width images so that as much as possible all the elements are relative to each other.

    I just tried the following through the W3C Unicorn validator and it came out fine, are you sure you don't have a different error above the statement which is causing the error?

    Code CSS:
    div {
    line-height: 1;
    height: 150%;
    background-color: red;
    margin-bottom: 1em;
    }
     
    span {
        height: 2em;
        line-height: 0.5;
        background-color: green;
        display: block;
    }
    What is the difference between the Unicorn Validator and the normal validator at validator.w3c.org?

    Off Topic:

    team1504 meant; line-height verses height and the fact line-height doesn't strictly need units - I suspect the sentence got slightly muddled
    I probably did. Sorry guys.

    Here is what the CSS Validator shows:
    W3C CSS Validator results for TextArea (CSS level 3)

    Sorry! We found the following errors (2)
    URI : TextArea
    46 ul#navigationList ul Parse Error [empty string]
    47 ul#navigationList ul Parse Error [empty string]


    When I 'd that error (Parse Error [empty string]), here is what I got:
    Thats because the validator only shows valid CSS hence this part
    Valid CSS information
    The font: .8em isn't valid CSS so it doesn't show on the validator page.
    bazz
    10-26-2008, 07:02 PM
    Blimey!!
    I missed that.
    bazz
    from this page

    However, now that I am actually looking at lines 46 and 47 border-radius is defined...
    But when I googled the error, it had nothing to do with border-radius and everything to do with using em's.

    Here is a segment of that css lines 43-47.

    Code CSS:
    height:1.6em;
        			line-height:1.6em;
        			z-index:2;
    			border-bottom-left-radius:55px;
    			border-bottom-right-radius:55px;


    So essentially, I was hoping you guys could help me fix this error, which I thought was due to using ems as the unit.

    I apologise if I made things more confusing and I hope you guys can still help me.

    Thanks in Advance,
    Team 1504

  16. #16
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Do you have a website we can see this in action and explain what you need? All this theory is making me a bit dizzy
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  17. #17
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Do you have a website we can see this in action and explain what you need? All this theory is making me a bit dizzy
    Unfortunately not
    This is all just small experiments / projects I am doing to refine my skills.

    Can I clarify on anything or do you want me to restate it in a clearer fashion?

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    why are you setting the height?
    if you set the height to 1.6em it will be 1.6 tall even if the line wraps ( essentially cutting off the second line), if you dont want this to happen then DONT set the height at all. the height of the object will be whatever it needs to be to contain the whole content. so if it's one line it will be 1.6em.. if its 2 it will 3.2em and so forth.

  19. #19
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)


    when I removed the height:1.6em, I still got the error on lines 46 and 47, which have to do with border-radius.

    So I 'd the parse error with border radius and found this sp forum thread:
    http://www.sitepoint.com/forums/css-...or-731686.html

    I think looked in the reported bugs with the W3C validator and other have had this problem too.

    I am really sorry for wasting your time, but I did learn a lot about the em unit

    I would have searched SP forums, but nothing came up when I searched for Parse Error dealing with the em unit, which Google results said the parse error dealt with.

    I sincerely apologise and I thank you for your help and time


Tags for this Thread

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
  •