using display:inline causes the last row of the table to be displayed incorrectly

RESOLVED DUPLICATE of bug 135994

Status

()

Core
Layout: Tables
RESOLVED DUPLICATE of bug 135994
14 years ago
4 years ago

People

(Reporter: Jonathan Turner, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows 2000
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7b) Gecko/20040305 Firefox/0.8.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7b) Gecko/20040305 Firefox/0.8.0+

The following code causes displays the rendering issue where the last row is
offset from the rest of the rows.

<html>
<head>
  <title>Table Problem</title>
  <style type="text/css">
    #content {
      text-align: center;
    }
    #content table {
      display: inline;
    }
    </style>
</head>

<body>

<div id="content">
  <table border="1" cellpadding="0" cellspacing="0" width="25%">
    <tr>
      <td>
	Table 1 Row 1
      </td>
    </tr>
    <tr>
      <td>
	Table 1 Row 2
      </td>
    </tr>
    <tr>
      <td>
	Table 1 Row 3
      </td>
    </tr>
  </table>
</div>
</body>
</html>

Reproducible: Always
Steps to Reproduce:
1. Run the code in the details
2. Compare with expectations 
Actual Results:  
The last row has a "ghost" that is offset from where it should be

Expected Results:  
There should be no ghost of the last row
So you have the table be an inline.  An anonymous table box is constructed
inside that inline and the rows are placed inside that.  The result is more or
less equivalent to the following markup:

<div id="content">
  <span style="border: 1px outset">
   <div style="dislay: table">
    <div style="display: table-row">
      Table 1 Row 1
    </div>
    <div style="display: table-row">
      Table 1 Row 2
    </div>
    <div style="display: table-row">
      Table 1 Row 3
    </div>
   </div>
  </span>
</div>

So the "ghost" you're seing is the border of the <span>.  The rendering looks
correct to me...
Created attachment 143619 [details]
The testcase
(Reporter)

Comment 3

14 years ago
(In reply to comment #1)
> So you have the table be an inline.  An anonymous table box is constructed
> inside that inline and the rows are placed inside that.  The result is more or
> less equivalent to the following markup:

> So the "ghost" you're seing is the border of the <span>.  The rendering looks
> correct to me...

If so, why does the ghost show only for the last row of the table and not the
whole table?  

[*snip*]

Your example gives very strange results in the latest Gecko, as well as Netscape
7's earlier Gecko.  I see a non-bordered table and two vertical lines about 60%
into the page.  IE, for instance, displays what I would assume is a more correct
rendering, with the table centered and some of the cells offset.
(Reporter)

Comment 4

14 years ago
Created attachment 143711 [details]
New test case from Boris's comments

This is a modified test case based on Boris's comments.  It shows another
behaviour that is possibly related.
> If so, why does the ghost show only for the last row of the table and not the
> whole table?  

Because the span is the height of the font.

> Your example gives very strange results in the latest Gecko

Actually, what it shows is right.  Your original testcase should be rendering
like that too, so the rendering there is not _quite_ right.  The fact that it
does not is caused by the fact that the anonymous table frame craeted in the
original testcase does not lead to an ib split and break the line....  we have a
bug on that.

As for IE, it has absolutely no support for table-related display type values in
CSS and does not allow changing the display value of tables (as in, it renders
them as tables regardless of what display value you use).  So testing any of
these testcases in IE is rather pointless.

Updated

14 years ago
Keywords: testcase
Whiteboard: DUPEME

Comment 6

14 years ago
Created attachment 150265 [details]
Test case with borders

Here is another test case showing the same thing, only with a CSS border and
background being used to further point out what is going on. The only
difference between the two tables in this file is that the second table is
display: inline. I don't understand why this would be expected behaviour. Both
IE in Windows and Safari in Mac OS X display both tables identically.

Comment 7

13 years ago
(In reply to comment #5)
> Actually, what it shows is right.  Your original testcase should be rendering
> like that too, so the rendering there is not _quite_ right.  The fact that it
> does not is caused by the fact that the anonymous table frame craeted in the
> original testcase does not lead to an ib split and break the line....we have a
> bug on that.

Boris, the line breaking dupe your looking for is bug 135994?
The rest is invalid I think.

Comment 8

13 years ago
Seems a dupe of bug 280501, and bug 201485 and also bug 135994.

Comment 9

12 years ago

*** This bug has been marked as a duplicate of 135994 ***
Status: UNCONFIRMED → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → DUPLICATE

Updated

4 years ago
Whiteboard: DUPEME
You need to log in before you can comment on or make changes to this bug.