201485 - STYLE="display: inline; vertical-align: top;" causes tables to render incorrectly

Status: RESOLVED DUPLICATE of bug 135994

(Core :: Layout: Block and Inline, defect)

Description

[Stephen Gower]

User-Agent:       Mozilla/5.0 (Windows; U; WinNT4.0; en-GB; rv:1.3) Gecko/20030312
Build Identifier: Mozilla/5.0 (Windows; U; WinNT4.0; en-GB; rv:1.3) Gecko/20030312

If a table is created, and set with STYLE="display: inline;" then all is well -
the table sits in the current line of text and it all displays properly. 
However, if "vertical-align: top;" is added to the style, then Mozilla gets the
hight of the line incorrect, so tables draw on top of each other, and on top of
other lines of text.

Reproducible: Always

Steps to Reproduce:
1. Create a table starting <TABLE STYLE="display: inline; vertical-align: top;">
2. Add some content that is higher than the current text (eg <IMG>s)
3. Put this table into the middle of a large paragrah of text (ie, one that wraps)
Actual Results:  
The text line that the table is in is not high enough - the table is drawn over
preceding lines.

Expected Results:  
Mozilla should expand the height of the line that the table is in, so that there
is room for the table to extend downwards without drawing over the previous or
subsequent lines.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Hmm... We seem to be getting the linebox wrong here... I think.  It's not clear
to me how the anonymous table frames inside the linebox should be affecting it.

Stephen, setting display:inline on a table makes it not be a table anymore; an
anonymous table is constructed inside it to hold the table rows... are you sure
that's the behavior you're looking for?

Comment 2

[Stephen Gower]

>setting display:inline on a table makes it not be a table anymore; an
>anonymous table is constructed inside it to hold the table rows... 

Why?  

Not "why does Mozilla do this?", but "what in the HTML/CSS specs indicates that
a table with display:inline should no longer be a table?"  I haven't looked in
detail, so it may well be there, but I couldn't see it on a first scan.

>are you sure that's the behavior you're looking for?

I'm looking for the behaviour currently shown by setting a table to be
"display:inline", but with the top of the table aligned to the top of the line.

I'm expecting a table that's an inline element to behaves like any other inline
element.  Imagine I took a screenshot of a table, and stuck it in an <IMG> -
that's the result I'd expect.

Comment 3

[Boris Zbarsky [:bzbarsky]]

> what in the HTML/CSS specs indicates that a table with display:inline should
no > longer be a table?

http://www.w3.org/TR/CSS21/visuren.html#propdef-display -- in particular, note
the 'table' display value.

In your case, what you actually have is a table box _inside_ an inline box --
since table-row boxes cannot be contained in an inline box, an anonymous table
box is created.  See http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

It sounds like what you may really want is inline-table (unfortunately not
implemented yet).

Again, I'm not quite sure what the layout of that testcase _should_ be per spec;
I'm hoping David knows...

Comment 4

[Boris Zbarsky [:bzbarsky]]

Ian, what should the layout be here?

Comment 5

[Hixie (not reading bugmail)]

The anonymous 'table' that is created should be created as a block-level table,
and so break the line. Does that answer the question? (See 17.2.1, 4)

Comment 6

[Ferran Casarramona]

All the same stuff about <table style="display:inline">
As in bug 280501, the height of the table are calculated as 'line-height'
instead of intrinsic 'height' if the table. (see
http://www.w3.org/TR/REC-CSS2/visudet.html#Computing_heights_and_margins)

Comment 7

[Boris Zbarsky [:bzbarsky]]

The height being line-height is correct, since it's not a table or inline-table
-- it's an inline.

But yes, this is a dup.

*** This bug has been marked as a duplicate of 135994 ***

Comment 8

[Ferran Casarramona]

(In reply to comment #7)
> The height being line-height is correct, since it's not a table or inline-table
> -- it's an inline.

As stated in http://www.w3.org/TR/REC-CSS2/tables.html#q5 In terms of the visual
formatting model, a table may behave like a block-level or replaced inline-level
element.
So I think a <table style="display:inline"> is a "replaced inline-level element"
so the height must be the intrinsic one, not the line-height.

Comment 9

[Boris Zbarsky [:bzbarsky]]

A "table" in CSS is something that has display "table" (or possibly display
"inline-table").  Once you set it to "display: inline", it is simply no longer a
table as far as CSS is concerned.  The fact that the tag happens to be <table>
means nothing.

Comment 10

[Ferran Casarramona]

(In reply to comment #9)
> A "table" in CSS is something that has display "table" (or possibly display
> "inline-table").  Once you set it to "display: inline", it is simply no longer a
> table as far as CSS is concerned.  The fact that the tag happens to be <table>
> means nothing.

I understand now. Sorry for my ignorance.
So to get the desired behavior we must use "inline-block" ( CSS 2.1 draft
http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#display-prop , obiously
not implemented yet) and it is not possible to do it now.