SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    line-height: find the height of an element

    Hello,

    In order to create my layout, I need to find the height of an <ul> element. Here it is:

    Code:
    ul {
    	list-style-type: none;
    	font-size: 2.3em;
    	line-height: 8.0;
    	border-top: 10px solid #000;
    	border-bottom: 10px solid #000;
    }
    
    li {
    	color: #f00;
    }
    Now, there will be some absolute positioning involved and I need to find how high is the <ul> going to be.

    My guess would be 10.3em + 20px.

    Am I heading the right direction?

    Regards,

    -jj.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Sounds like wild guess work to me. We can't really answer for you, as we don't know how many LIs there are, etc. You'd probably need JavaScript to get an accurate calculation, but even then I wouldn't be too trusting. Users may resize things etc, which will be problematic. I'd suggest finding a better solution than pos: abs, or perhaps rethink the design, as this sounds like it's asking for trouble to me.

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh so sorry... <li> are inline.

    Couldn't correct the initial post.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jjshell View Post
    Hello,

    In order to create my layout, I need to find the height of an <ul> element. Here it is:

    Code:
    ul {
        list-style-type: none;
        font-size: 2.3em;
        line-height: 8.0;
        border-top: 10px solid #000;
        border-bottom: 10px solid #000;
    }
    
    li {
        color: #f00;
    }
    Now, there will be some absolute positioning involved and I need to find how high is the <ul> going to be.

    My guess would be 10.3em + 20px.

    Am I heading the right direction?

    Regards,

    -jj.
    Yes the height will be 10.3em + 20px for the borders assuming you don't have more than one list item or assuming the elements don't wrap at some stage.

    Why the 8.0 line-height? That seems a bit odd unless you are just centering some large text in the vertical center.

    If you are absolutely placing something in relation to that ul then you don't need to know the height because if the ul has position:relative applied then an internal list element can be placed at top,bottom, right or left or full height/width as required because an absolute element always knows the dimensions of its parent (in IE6 and above).

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Also it would/should NEVER be a fixed height as you're using EM... 8em by default on most computers being 128px tall, but on many machines (like mine) it's 160px, on some systems it can be as little as 96px or as much as 256px, and moving forward it could go EVEN HIGHER. That's actually part of why you're supposed to use %/em in the first place.

    Though Paul is asking the right question -- what the devil are you doing with such a massive line-height?!?

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm centering a line of text.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jjshell View Post
    I'm centering a line of text.
    In relation to? If it's to other text that has a dynamic height trying to fix the height of either could be a recipe for failure. It's why as a rule of thumb making anything 'really tall' or more complex than a heading be a fixed height usually falls apart miserably so far as web design is concerned.

    IF you can guarantee said text is a single line and IF you can guarantee it would never need to wrap, I'd consider maybe apo top:50%; margin-top:-xx; -- where xx == half your line-height, using a normal line-height like 140%... so margin-top:-0.7em;

    I'd have to see both elements to say for sure -- but trying to design to a fixed height on anything that large? Just ASKING for it to break.

  8. #8
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The mark-up is fairly classic:

    Code:
    <ul>
    <li>Mason</li>
    <li>Hans</li>
    <li>Denis</li>
    </ul>
    I'm trying to have big text here. Vertically centered. Hence the css I posted. I feel you guys don't like the approach I'm using for centering. Any advice?


  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    correct me if I am wrong but i thought the line-height w/o units was used a coefficient. so line-height:8.0; will yield 8 times the height of the specified font-size for the element!

    Aesthetically, I have to ask why so much "white space" ( roughly 3.5 times the X height bove and bellow your text???) and this is w/o taking in to consideration users with different settings or system ress. Are you actually wanting to set a fixed sized image background and are trying to convert ems to px?

    The other flaw is , tho it may be inconsequential since all your links are one word but I like to plan for worst case scenarios, that if your link text wraps you will have THAT MUCH space between the two lines!


    ditch the line height, no-wrap and padding might work. but the question is what are you vertically centering in relation and proportional to? because what you are saying is that you want.

    line-height doesn't make big text. It sets the spaces between lines, so such extreme line height sets HIGH lines but doesnt enlarge your text.

  10. #10
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Dres line-height: 8.0 is the same as 8em or 800%, to my knowledge
    Ryan B | My Blog | Twitter

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The question still stands, "vertically centered compared to WHAT?" The browser window? Some other element on the page we're not seeing?

    I think we're really not grasping what you're trying to do.

  12. #12
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rguy84 View Post
    Dres line-height: 8.0 is the same as 8em or 800%, to my knowledge
    unreliable without the metric cross-browser, PARTICULARLY on large font/120 dpi machines no matter what certain people keep saying (I actually think it ignores the default font size when calculating at the start?). The only value you should EVER omit the metric on is zero... Zero is always zero... anything else, say the metric.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    correct me if I am wrong but i thought the line-height w/o units was used a coefficient. so line-height:8.0; will yield 8 times the height of the specified font-size for the element!
    The only difference between line-height:8.0 and line-height :8 em is that the former is actually a scaling factor and that scaling factor is passed on to it's children unlike 8em which is turned into a fixed pixel height and that same pixel height is passed down to its children.

    If you have a child element with a smaller font-size then using the scaling factor the line line-height will be smaller to match that smaller element and look more sensible.

    I am of the opinion that unitless line heights are much more sensible in most cases as does Eric Meyer.

  14. #14
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Thanks for that little lesson, Paul. I've never come across that before. Great little tidbit... I always hated having to redeclare "line-height: 1em". Now I know why. =)


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
  •