SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    smaller EM placed inside P generates bigger box

    Hi,


    Trying to keep vertical rhythm but slowly giving up. Firefox 3.6.9, Linux.
    Please take a look at http://ryrych.pl/null/ems.html

    LI contains two P. Both have line-height set to 21px. Despite the fact that em.comment-data has font-size of 10px (line-height of 21px) it cause the whole paragraph is not 21px but 23px. I removed it temporarily and the problem vanished. It also turns out that setting its size to 14px helps.

    Where's the problem? Can't figure it out myself.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first p. is its the box model having 22.5px. put line-height:0 for the elements in it. now computed box model for both p has 21px as height.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man a lot! But I still don't understand this behaviour. Children of P should have been inside P box model (21px) and don't exceed it. Can you explain it to me?

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    simple. some parent elements extend their box model to accommodate their children. that's the computed box model for you as opposed to the theoretical one.

    and you're welcome you should practice using developer tools browsers have to offer. firebug is really good.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Just because you set a line-height doesn't mean that that is the height of it . The height will be whatever the calculated height is because you didn't set a height
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    setting a height is not enough to solve all your problems. it can mean more problems too. you need to think about overflow: what happens when the content of an element doesn't fit within the boundaries of its box model.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    setting a height is not enough to solve all your problems. it can mean more problems too. you need to think about overflow: what happens when the content of an element doesn't fit within the boundaries of its box model.
    If you set a height then that height will be respected with block elements.
    Content will hang out though
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure it's respected and that's why you have overflow which is the cause for some nasty looking renderings when you don't take account of the fact that setting a height might cause the overflow...

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    sure it's respected and that's why you have overflow which is the cause for some nasty looking renderings when you don't take account of the fact that setting a height might cause the overflow...
    Yep.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i guess i have to break it down my self to RRH.

    try and put more content in those paragraphs, or resize your browser window to something little enough that their content will extend over one line. you'll see that your 21px is not holding, meaning that they are equal only when they have the same number of content lines, in case that the equal size p is what your looking for here. those p will be proportional though, due to the same line height value, given the solution above. also, try and put height: 21px for them to test what happens now when their content extends more than one line.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The inline box model is a very complicated thing and a thing of beauty (not).

    Line-height sets the minmum height of the line so it can change depending on its content. You set the line-height to 21px which means that the half leading that is distributed between top and bottom of the line is 21px - 14(font-size) = 7px to be equally distributed between top and bottom = 3.5px each side (ignoring the fact that there is no such thing as half a pixel so there will be some differences in the way that this is distributed between browsers anyway.

    Then you have another inline box that has font-size of only 10px which means that 11px will be distributed over the top and bottom = 5.5px each side. However the smaller text sits on the baseline and when the 5.5px half leading is added to the bottom it pushes the line height higher than it was.

    You can test this by changing the vertical alignment of the inner element to top and the line reverts to 21px.

    e.g.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    *{margin:0;padding:0}
    p {
        font-size:14px;
        background:red;
        line-height: 21px;
    }
    span {
        color: #98B5F2;
        font-size: 10px;
     vertical-align:top
    }
    
    </style>
    </head>
    
    <body>
    <h1>test</h1>
    <p>This is some ext <span>in a span</span></p>
    </body>
    </html>
    (Note that "top" is referring to the text next to it and not the top of the line. This just moves it up so that its half leading doesn't go outside the existing line-box.)

    Therefore when you have inline boxes of varying font-size you should reduce the line height on the smaller font sizes to avoid this happening.

    Or as Eric Meyer suggests unitless line-heights would achieve this more simply.

    Code:
    p {
        font-size:14px;
        line-height: 1.5;
    }
    .comment-data {
        color: #98B5F2;
        font-size:10px;
    }
    The child elements inherits the scaling factor (because of the unitless line-height) and not the computed height as per other methods and thus keeps the text within the boundaries of the line.

    Easy once you know how isn't it

    I've included an attachment as it so much easier to see in a drawing.
    Attached Images Attached Images

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    simple. some parent elements extend their box model to accommodate their children. that's the computed box model for you as opposed to the theoretical one.
    Yup, I know that some parents extend their box to accomodate their children.
    Heck, but I don't understand this:

    there are two EMs in first P. First EM's height evaluates to 18px. Second to 13px. But the latter makes P to extend its evaluated height to 22.5px (its size is set to 10px). What is this 1.5px from?

    and you're welcome you should practice using developer tools browsers have to offer. firebug is really good.
    Thanks. I use Firebug in my all projects. I'm studying typography these days so I wanted to improve my site. I encountered this problem making vertical rhythm.

    Maybe it's time to review again Meyer's book on CSS.


    ps
    sorry for such dumb question

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    9 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RRH View Post
    ps
    sorry for such dumb question
    Not a dumb question at all, a lot of people have trouble with the inline box model. Even Eric Meyer. It's by far the most complicated subject in CSS
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B: WOW! I'm much impressed how professional feedback I got!
    THANK YOU buddies!


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
  •