The point I was making is that the same problem applies to using values also. There is no extra problem with unit less values. I agreed that there are certain elements that you need to make sure you specify the line height for but that is the same whether you use units or not - unless I misunderstood. For divs and spans etc you don’t need to worry.
You obviously have to take care with what the UA is applying by default as that will win out over inherited styles - just like font-family doesn’t inherit into form elements. I bet you never say div,span {margin:0;padding:0} as you know they aren’t needed.
I will say thanks for pointing out the ancient code in my site and soon as I get a few spare minutes (not this week though) I’ll tidy it up.
You did… misunderstand that is. If my user.css read * {line-height:1.2 !important} it’s still broken… just by a different amount; the inheritance is broken by omitting the metric!
Your comment in the previous post leads me to think that you may have misunderstood what unitless line height really means.
i.e.
1.4 is a scaling factor unlike 1.4em which refers to a computed pixel size. With 1.4em you pass the computed pixel line height down to the child even if the child’s font-size is only half that of the parent. If the parent is 30px then the line-height is 42px. If the child then has a font-size of only 14px then the line-height is still 42px which will be much too tall for the smaller text.
On the other hand 1.4 passes a scaling factor of 1.4 down to the child so the child with a smaller or larger font-size will have a line-height based on its own font-size (1.4 x new font size) and therefore suit the text much better. As above if the parent has a font-size of the 30px the line height will be 42px but if the child has a font-size of 14px then the line height will automatically be 20px (19.6) without having to re declare anything.
You say that line-height doesn’t inherit into pre but this example works fine for me:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div {
line-height:5;
}
pre{
background:blue;
font-size:16px;
}
p {
line-height:5em;
background:red;
font-size:16px;
}
</style>
</head>
<body>
<div>
<pre>
test some text to see the effect of line-height
</pre>
</div>
<p>test p element</p>
</body>
</html>
If you change the div to 5em the results are exactly the same.
However if you remove the font-size from pre then the results for unitless line-height will be different because the line-height will then be 5 times whatever the default font-size of the pre element is (13px in firefox). Unlike the em version which will take the default size of the divs font-size (16px in firefox) and pass that parents pixel line-height down to the child when the child actually only has a 13px font-size.
I am willing to be convinced but at the moment I can’t see it.
That example works because the size isn’t set on that parent div. Set font-size:85% on the DIV, and you get 85%x120% on the pre instead of 5x 85% OR the 5x 16px (the latter being what people expect, the former being what it would do if you give it a metric). It doesn’t inherit right when you change the size.
No, you are incorrect and it still works exactly as it should. Whether or not that’s what you or others expect is another matter :).
Setting 85% on the div will have no effect on the pre in my example because I set the font-size of the pre to 16px. The line height will still be 5 x16px = 80px. If I leave the div at 85% and remove the font-size from the pre then it still works as the font-size of the pre becomes 11px and the line height is thus 5 x 11px = 55px exactly as it should be. It works every way for me just as it should and just as I expect.
It is not supposed to give the same results as using units as they are totally different things. The unitless value does not pass a computed pixel size down to the child it passes the scaling factor which is then tested against the font size of that child element to produce the line height. The scaling factor is inherited and not the computed pixel line height.
Apologies though, I didn’t mean to drag this thread off topic but I wanted to get to the bottom of why you feel unitless line heights are broken and then at least I could document any bugs found.
Thanks a lot DeathShadow, I can see you put a lot of time and effort into writing that up for me so I really appreciate that. I wish I had some input in your guys’ debate going on here but I don’t have enough knowledge nor experience yet to say anything. I wanted to ask, do you guys recommend any good CSS books?
