W3C home > Mailing lists > Public > www-style@w3.org > March 2001

CSS 2: Table Cells and the "line-height" Property

From: James Aylard <jaylard@pixelwright.com>
Date: Fri, 16 Mar 2001 15:16:43 -0800
Message-ID: <014d01c0ae6f$2a4c72f0$2161398a@newcos.com>
To: <www-style@w3.org>
    While viewing pages with one of the late Mozilla releases (perhaps M18,
although possibly somewhat earlier), I discovered that the Mozilla team's
interpretation of the CSS 2 box model causes pixel-precise table layouts to
"break" [1]. When the Mozilla browser operates in either Transitional
"standards" or Strict mode (as determined by the DTD), it treats all table
cells that contain images as though they have a line-height setting, even
when they contain no text or white space. This results in the vertical
elongation of table cells whose "height" attribute is set to a value less
than the standard line-height. In light of the Mozilla implementation, I am
struggling to understand the intent of the CSS 2 recommendation in this
regard.
    In particular, the Mozilla team cites section 10.8.1 [2] of the CSS 2
recommendation:

    "If the property is set on a block-level element whose content is
composed of inline-level elements, it specifies the minimal height of each
generated inline box." [3]

    The Mozilla team argues that this wording is erroneous:

    "This statement in CSS2 is clearly wrong -- what it meant to say was
'line box' and not 'inline box'. Our interpretation ... of what this means
is that the minimum height is established by an anonymous inline box
containing the entire inline contents of the block (in this case, the TD),
since that's the only interpretation that doesn't yield weird results around
changes in font size." [4]

    I did not find a correction listed for this in the CSS 2 errata section
[5], so I am not certain whether the contention that it is "clearly wrong"
is true. (Admittedly, I find that the discussion of inline boxes, line
boxes, etc., quickly becomes confusing  -- perhaps I would benefit from
diagrams!). But I understand that their argument is this: that the CSS 2 box
model treats the <td> element as a block element, and any <img> elements
contained within it are treated as simple inline elements, for purposes of
applying line-height -- and that this line-height overrides any height set
on the <td>.

    But if my understanding of the Mozilla argument is accurate, then I
question whether their position is correct. In section 10.8.1, the sentence
which immediately follows the one cited above is this: "(Except for inline
replaced elements, where the height of the box is given by the 'height'
property.)" This suggests to me that a <td> element which contains only an
<img> element -- which is a replaced inline element -- should abide by the
height of those replaced inline elements rather than by the line-height of
an assumed anonymous box.

    Please understand that I am in no way interested in picking an argument
with our friends on the Mozilla team (some of whom certainly participate on
this list), or to denigrate their work in any way. I am genuinely conflicted
over this interpretation of the CSS 2 box model, and am seeking
clarification.
    Can anyone authoritatively clarify the intent of the CSS 2 specification
with regard to height and line-height, and its application to table cells
which contain only images? If I am off the mark on any point, please
straighten me out. I would greatly appreciate it.

James Aylard

1. http://www.equilon-mrc.com/dev/N6_anim.gif (A two-frame, animated gif
that shows a "before-and-after" screen-grab of one table-based page. The
first frame is of the table when rendered in Mozilla "quirks" mode, achieved
by providing a DTD with a URI that the browser apparently cannot interpret;
the second, with stretched-out content, is of the same page when the
standards-mode Transitional DTD is applied to the page.)
2. http://www.w3.org/TR/REC-CSS2/visudet.html#q22
3. http://www.w3.org/TR/REC-CSS2/visudet.html#q22
4. Personal correspondence with L. David Baron, Mozilla project manager. A
detailed explanation of Mr. Baron's interpretation of the box model may be
found at:
http://www.people.fas.harvard.edu/~dbaron/css/2000/01/dibm
5. http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html
Received on Friday, 16 March 2001 18:16:16 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:08 GMT