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.
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?
Assignee: table → block-and-inline
Component: Layout: Tables → Layout: Block & Inline
QA Contact: madhur → ian
>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.
> 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...
Ian, what should the layout be here?
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)
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)
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 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → DUPLICATE
(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.
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.
(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.
You need to log in before you can comment on or make changes to this bug.