1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Half line-height bug

Problem

If line-height is defined for a block, it will collapse by half for any line that contains a replaced element (img, input, textarea, select, or object).

Solution

Alas, there is no reliable fix for this bug. Taking the element in question out of normal page flow (by either absolute positioning or floating it) will fix the bug, but not exactly solve the problem.

Detailed description

This bug will be triggered by the presence of any replaced element, images, form elements and object tags alike. It's also impossible to fix, but instead can be worked around.

What's happening? Well, the CSS 2.1 recommendations (reference) specify that the difference between line-height and font-size is leading- half of that value is half-leading. Browsers and other user agents should apply half-leading to the top and bottom of inline elements accordingly. However, Internet Explorer (versions 6 and earlier) instead collapses the half-leading of the current line with the half-leading of the preceding and subsequent lines if the line contains a replaced element.

This bug was originally reported by Jeroen Mulder on positioniseverything.net.
You can review Jeroen's original article here.

Text ID: HALF_LINE_HEIGHT

---