Forum Moderators: not2easy
My co-worker and I cannot explain why we are getting this odd result after applying some CSS to text.
The text inside the first paragraph inherits font-size and line-height from wrapper. Result: Expected.
From wrapper:
font-size: 2em;
line-height: 120%;
From p:
color: red;
The text inside the second paragraph inherits line-height from wrapper. Result: Unexpected. The text appears compressed ignoring the 120% line height.
From wrapper:
line-height: 120%;
From .test:
color: blue;
font-size: 6em;
The text inside the third paragraph inherits nothing from wrapper. Result: Expected
From .test2:
color: black;
font-size: 6em;
line-height: 120%;
Our dilemma:
Why are the second and third paragraphs displaying differently? They both have the same classes except for the font color.
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
#wrapper {
font-size: 2em;
line-height: 120%;
}
p {
color: red;
}
.test {
color: blue;
font-size: 6em;
}
.test2 {
color: black;
font-size: 6em;
line-height: 120%;
}
</style>
</head>
<body>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
<p class="test">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
<p class="test2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
</div>
</body>
</html>
[w3.org...]
<percentage> The computed value of the property is this percentage multiplied by the element's computed font size.
note that using a number will yield what you seek:
<number> The used value of the property is this number multiplied by the element's font size. [...] The computed value is the same as the specified value.
Note the subtle difference in wording.
In short to get what you expect: set the line-height not to 120% but to 1.2 .
I am confused here. Why is .test expected to get 120% of 2em? Shouldn't it get 120% of 6em?
[quote]
.test {
color: blue;
font-size: 6em;
}
[/quote]
Both Firebug on Firefox and Developers Tools on IE8 show the classes used for <p class="test"> as follows:
[quote]
color: blue;
font-size: 6em;
line-height: 120%; <- from Wrapper
[/quote]
*scratches head*
Thank you!
The 1.2 is a factor that is inherited as such, and computed for the test based on its font-size.
[w3.org...]
See rule #2, together with the earlier quotes. Yes it's rather subtle in the standard.
There's an older thread out here somewhere that explains it much better than what I'm doing but I can't find it right now.
I did find it mentioned in the old CSS crash course part4:
[webmasterworld.com...]
