78208 - Solve the line-height/vertical-align issue with images in tables

Status: VERIFIED WONTFIX

(Core :: CSS Parsing and Computation, defect)

Description

[Henri Sivonen (:hsivonen) (away from Bugzilla until 2026-04-13)]

The number one problem page authors face with Mozilla's standards layout mode is
that gaps appear in tables that contain images. This is a bad thing, because now
the general solution is to develop a dislike of Mozilla or to avoid the
standards layout. Frankly, I don't see defaulting to gaps (applying the line box
rules when there is no text line) to be beneficial in any way. Making the gaps
go away by default would promote the use of the standards layout mode and
enhance the impression page authors get with Mozilla. 

With these elements
<td><a><img></a></td>
authors (based on experience and intuition) expect the size of the table cell to
match the size of the image.

So basically, this would mean not applying the line-height and alignment wrt.
baseline rules when there really is no textual line ie. when the elements
contain no text (or no non-whitespace).

Mozilla already has code for this on the quirks side.

Possible ways of solving this in terms of standards-compliance:
* Adjusting the interpretation of the CSS2 spec.
* Asking the CSS WG to OK the practical approach that IE and Opera have already
taken.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

CSS2's layout model is not necessarily designed to work well with
tables-as-layout.  They're two separate models, and I don't see why we should
break one to be compatible with the other.

More comments later, when I have time...

Comment 2

[Henri Sivonen (:hsivonen) (away from Bugzilla until 2026-04-13)]

>I don't see why we should break one to be compatible with the other.

Because the current behavior is really frustrating to page authors and because
the gaps (as far as I can see) aren't useful in any situation. Would it really
be "breaking" the CSS2 model? Did the authors of the CSS2 spec really intend the
gaps to be there?

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The authors of the CSS2 spec did not intend for web pages to be one giant image
broken up into tables so that pieces of it could be links.  CSS2 provides far
better ways to make web pages.  We should be encouraging page authors to use
these new ways -- that's what strict mode is about.

And yes, the gaps are necessary.  Otherwise they would cause strange line
spacing in paragraphs that had a smaller font for some of the text (enough to
have a complete line of small text).

Furthermore, it's not hard to work around the problems, either with
'display:block' or with 'vertical-align: bottom'.

Resolving as WONTFIX, although if you want me to comment in more detail later I
can.

Comment 4

[Henri Sivonen (:hsivonen) (away from Bugzilla until 2026-04-13)]

>The authors of the CSS2 spec did not intend for web pages to be one giant 
>image broken up into tables so that pieces of it could be links.

Yes, but putting gaps in such layouts fuels the thinking that standards are a
pain and nuisance for Web authors. (Some people, indeed, think that way.) Then
we see sites that kick out Mozilla and tell visitors to download IE or Nav 4.x.

>And yes, the gaps are necessary.  Otherwise they would cause strange line
>spacing in paragraphs that had a smaller font for some of the text (enough 
>to have a complete line of small text).

But this isn't about alignment with text. This is about alignment in table cells
that only contain an image (possibly within an anchor).

>Furthermore, it's not hard to work around the problems, either with
>'display:block' or with 'vertical-align: bottom'.

I am aware of that, but I've had a Bugzilla account for quite some time. The
problem is that the average Web author has no idea of any such thing and thinks
Mozilla is seriously broken. Just look at the number of duplicates bug 22274
has. (BTW, vertical-align: bottom breaks things in Opera.)

How about putting img {vertical-align: bottom} in the UA stylesheet? That would
at least fix things in cases where the images are as tall as or taller than the
line-height.

Comment 5

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

> Yes, but putting gaps in such layouts fuels the thinking that standards are a
> pain and nuisance for Web authors. (Some people, indeed, think that way.) Then
> we see sites that kick out Mozilla and tell visitors to download IE or Nav
> 4.x.

So how are we going to make progress?  (I'll respond to this more in my longer
response.)

> But this isn't about alignment with text. This is about alignment in table
> cells that only contain an image (possibly within an anchor).

It's the same box model.

> How about putting img {vertical-align: bottom} in the UA stylesheet? That
> would at least fix things in cases where the images are as tall as or taller
> than the line-height.

It would also put any image that's not alone in a table cell in the wrong place.

Comment 6

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Added detailed comments on bug 22274.

Comment 7

[Hixie (not reading bugmail)]

v