Line spacing..?
- Thread starter Famine
- 7 comments
- 553 views
- 2,823
- GTP_Brent
no, you're correct.
Forgive me for this, but:
Edit:
The Line Spacing
Is Fixed
I noticed this when some idiot was posting in size 5 font in the drift forum. Seems the acronym WYSIWYG is not 100% accurate when applied to the new post editor.
Forgive me for this, but:
Edit:
The Line Spacing
Is Fixed
I noticed this when some idiot was posting in size 5 font in the drift forum. Seems the acronym WYSIWYG is not 100% accurate when applied to the new post editor.
- 89,016
- Rule 12
- GTP_Famine
That's the thing... it isn't restricted to FF...
At home, Layer's text doesn't overlap. At work it does. BOTH computers running the 'fox. But I first noticed the reduction in line spacing on IE at work and it was still the same when I got home and foxed it...
At home, Layer's text doesn't overlap. At work it does. BOTH computers running the 'fox. But I first noticed the reduction in line spacing on IE at work and it was still the same when I got home and foxed it...
- 24,527
- United States
- GTP_Jordan
- GTP_Jordan
Yes, I adjusted the line height slightly a while back, but I forgot about that line-height bug. I can't be bothered to spend a lot of time on it at the moment, but if Sage or someone else know the "quick fix" off the top of their head I would certainly appreciate the help. I probably just need to make the line-height declaration in a unit other than em's.
Sage
Staff Emeritus
- 12,533
- United States
- GTP_Sage
Yup the easy way to circumvent the problem (its actually not a bug 
) is to specify the line-height in unit-less numbers (e.g.: line-height: 1.5.
When you specify the line-height with units, the browser calculates the line-height for the parent (usually the body), then applies that same line-height to every child element without re-calculation, even if its a relative unit. For example:
The browser first calculates that 2*14 = 28px, and applies that to the first paragraph, just as youd expect. You would then expect the browser to make the small texts line-height 20px, right? (2*10 = 20.) Wrong-o. The browser inherits the calculated value of the line-height, not the specified value thus, everything in this document will have a line-height of 28px, no matter what the size of the text.
On the other hand, if you do this:
Youll get what youd expect the browser will re-calculate the line-height for each child element.
Its all specified like this by the W3C for some strange reason.
) is to specify the line-height in unit-less numbers (e.g.: line-height: 1.5.When you specify the line-height with units, the browser calculates the line-height for the parent (usually the body), then applies that same line-height to every child element without re-calculation, even if its a relative unit. For example:
HTML:
body { font-size: 14px; line-height: 2em; }
.small { font-size: 10px; }
<body>
<p>Text</p>
<p class="small">Small text></p>
</body>The browser first calculates that 2*14 = 28px, and applies that to the first paragraph, just as youd expect. You would then expect the browser to make the small texts line-height 20px, right? (2*10 = 20.) Wrong-o. The browser inherits the calculated value of the line-height, not the specified value thus, everything in this document will have a line-height of 28px, no matter what the size of the text.
On the other hand, if you do this:
HTML:
body { font-size: 14px; line-height: 2; }
.small { font-size: 10px; }
<body>
<p>Text</p>
<p class="small">Small text></p>
</body>Youll get what youd expect the browser will re-calculate the line-height for each child element.
Its all specified like this by the W3C for some strange reason.
