jjshell — 2011-08-14T09:14:39-04:00 — #1
In order to create my layout, I need to find the height of an <ul> element. Here it is:
border-top: 10px solid #000;
border-bottom: 10px solid #000;
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?
ralphm — 2011-08-14T10:12:54-04:00 — #2
jjshell — 2011-08-14T12:14:22-04:00 — #3
Oh so sorry... <li> are inline.
Couldn't correct the initial post.
paulob — 2011-08-14T12:44:36-04:00 — #4
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).
system — 2011-08-14T14:44:46-04:00 — #5
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?!?
jjshell — 2011-08-14T17:06:27-04:00 — #6
I'm centering a line of text.
system — 2011-08-14T17:33:21-04:00 — #7
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.
jjshell — 2011-08-15T14:29:50-04:00 — #8
The mark-up is fairly classic:
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?
dresden_phoenix — 2011-08-15T15:50:12-04:00 — #9
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.
rguy84 — 2011-08-15T16:01:12-04:00 — #10
Dres line-height: 8.0 is the same as 8em or 800%, to my knowledge
system — 2011-08-15T16:57:51-04:00 — #11
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.
system — 2011-08-15T16:59:23-04:00 — #12
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.
paulob — 2011-08-15T17:29:13-04:00 — #13
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.
samanime — 2011-08-15T17:38:56-04:00 — #14
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. =)