Hello,
In order to create my layout, I need to find the height of an <ul> element. Here it is:
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. 
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.
Oh so sorryā¦ <li> are inline.
Couldnāt correct the initial post.
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).
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?!?
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.
The mark-up is fairly classic:
<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?
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.
Dres line-height: 8.0 is the same as 8em or 800%, to my knowledge
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.
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.
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.
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. =)