Vertical alignment of inline tables

The three most popular Web browsers

are very challenged by the CSS vertical-align property when applied to tables whose CSS display property is inline.

For not one of the possible values of vertical-align do all three agree, and none of the browsers does very well when compared with the very mature, very public standard.

See CSS 1 standard on vertical-align.

Safari (to 3.0.4) does not accept the challenge: it doesn't inline tables at all.

There are a couple of issues that are unfortunately left up to interpretation. The browsers, usurprisingly, do silly things in these cases.

Note: specifying the border of the table (either with CSS or with the table attribute) has a pathological effect in both Firefox and Opera (but IE gets it right)

standard example conformance

unspecified vertical-align

By default, value should be baseline

baseline
A
B
baseline

FF: bottom of table is on baseline. Consistent with baseline

IE: like FF

Opera: middle of table is on baseline. Inconsistent with baseline.

vertical-align: baseline

Align the baseline (or bottom, if there is none), with enclosing baseline.

baseline
A
B
baseline

FF: puts the bottom of the table on the baseline

IE: like FF

Opera: acts as if the baseline of the table were that of its top row.

vertical-align: top

Align top of the table with top of highest item in enclosing line.
baseline
A
B
baseline

FF: wrong (looks like default)

IE: right

Opera: right

vertical-align: bottom

Align bottom of table with bottom of lowest item in enclosing line.

baseline
A
B
baseline

FF: right

IE: wrong: instead puts the bottom of the top row of the table on the bottom.

Opera: like IE.

vertical-align: middle

Place middle of table at half the enclosing font's x-height above baseline.

baseline
A
B
baseline

FF: completely wrong (looks like default)

IE: right

Opera: is off. middle is on the baseline

vertical-align: text-top

Place top of table at the top of enclosing line's text.

baseline
A
B
baseline

FF: completely wrong (looks like default)

IE: right

Opera: is high, in a way I don't understand

vertical-align: text-bottom

Place bottom of table at the bottom of enclosing line's text.

baseline
A
B
baseline

FF: right

IE: right

Opera: wrong (looks like default)

vertical-align: super

Standard unclear on what this should do.

baseline
A
B
baseline

FF: just looks like the default again.

IE: puts the bottom row of the table where a superscript would be

Opera: looks like it raises the table (from default middle position) by the amount of a subscript

vertical-align: sub

Standard unclear on what this should do.

baseline
A
B
baseline

FF: The baseline of the bottom element is lower than the text baseline

IE: puts the top of the table where the top of a subscript would be

Opera: like IE

vertical-align: -100%

Move the table down by one line-height

baseline
A
B
baseline

FF: puts the middle of the table on the baseline. Consistent with baseline

IE: like FF

Opera moves it the right amount, but since it started out with the table's middle on the baseline, the effect is quite wrong.