Closed Bug 18440 Opened 25 years ago Closed 24 years ago

{compat} nested tables honor percentage heights

Categories

(Core :: Layout: Tables, defect, P3)

Product:
Core
Component:
Layout: Tables
Platform:
x86
Windows NT
Type:
defect

Tracking

()

Status:
VERIFIED FIXED

People

(Reporter: mcebulski, Assigned: karnaze)

Details

(Keywords: testcase, Whiteboard: [testcase])

Attachments

(1 file)

testcase
116 bytes, text/html
Details 
This is the exact HTML that is causing the problem for me (code represents a
calender type HTML document):

<HTML><HEAD><META NAME='GENERATOR' Content='Microsoft Visual Studio
6.0'><TITLE></TITLE></HEAD><BODY><FORM><table BGCOLOR = '#D3D3D3' BORDER = '1'
CELLPADDING = '1' CELLSPACING = '0' HEIGHT = '100%' HEIGHT = '100%' WIDTH =
'100%'><tr><td WIDTH = '1%'>&nbsp;<input type=hidden name='RowHeaderFlag'
value=0></td><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th
>Thursday</th><th>Friday</th><th>Saturday</th></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'>&nbsp;</td><td WIDTH =
'14%'><table BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING =
'0' HEIGHT = '100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN
= 'right' WIDTH = '10%'>1</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2'
HEIGHT = '100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table
BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT =
'100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right'
WIDTH = '10%'>2</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR>This is a statement.<BR><BR><BR></td></tr></table></td><td WIDTH =
'14%'><table BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING =
'0' HEIGHT = '100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN
= 'right' WIDTH = '10%'>3</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2'
HEIGHT = '100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table
BGCOLOR = '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT =
'100%' HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right'
WIDTH = '10%'>4</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>5</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>6</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>7</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>8</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>9</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>10</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>11</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>12</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>13</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>14</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>15</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>16</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>17</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>18</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>19</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>20</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>21</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>22</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>23</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>24</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>25</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>26</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>27</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td></tr><tr><td WIDTH = '1%'><input
type='checkbox' name='RowSelect' value='SELECTED'><input type=hidden
name='RowHeaderFlag' value=16></td><td WIDTH = '14%'><table BGCOLOR = '#FFFFFF'
BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%' HEIGHT =
'100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>28</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>29</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'><table BGCOLOR
= '#FFFFFF' BORDER = '0' CELLPADDING = '0' CELLSPACING = '0' HEIGHT = '100%'
HEIGHT = '100%' WIDTH = '100%'><tr><td>&nbsp;</td><td ALIGN = 'right' WIDTH =
'10%'>30</td></tr><tr><td BGCOLOR = '#FFFFFF' COLSPAN = '2' HEIGHT =
'100%'><BR><BR><BR><BR></td></tr></table></td><td WIDTH = '14%'>&nbsp;</td><td
WIDTH = '14%'>&nbsp;</td><td WIDTH = '14%'>&nbsp;</td><td WIDTH =
'14%'>&nbsp;</td></tr></table></FORM></BODY></HTML>

Main columns table should appear to be overly "tall". I have the error occuring
both in the apprunner.exe and viewer.exe found mozilla-win32-M9-fullcircle.zip
dated 9/28/99 9:16AM.
Whiteboard: need reduced test case
Whiteboard: need reduced test case → [testcase]
The problem here seems to be that nested tables in mozilla honor a 'height=100%'
attribute, whereas nested tables in other browsers do not and instead just treat
the nested table with an 'auto' height. This can be reproduced with the
following snippet:

<table height=100%><tr><td>
  <table border height=100%><tr><Td> text </td></tr></table>
</td></tr></table>
Summary: Table verticle sizing incorrect. → {compat} nested tables honor percentage heights
Marking "{compat}" because the problem is manifested because of reliance on
legacy behavior. Changing summary to be more precise.
Attached file testcase — 

    
  
Status: NEW → ASSIGNED
Target Milestone: M14

    
    

    
  
Bulk moving [testcase] code to new testcase keyword. Sorry for the spam!
Keywords: testcase

    
    

    
  
Moving to M16.
Target Milestone: M14 → M16

    
    

    
  
Do I understand this correctly: Mozilla handles this right, but other 
browsers don't?

    
    

    
  
It looks like IE honors the 100% inner table height and Nav4.x does not. Tables 
differ slightly from the CSS 2 spec in that a table with a percentage height 
will use the viewport height if the body doesn't have a computed height. Since 
both Nav and IE support this, it then seems reasonable that the test case should 
honor the nested percentage height. If instead, in standard mode, I were to 
follow the spec, then a lot of pages would be much different than Nav and IE. 

    
    

    
  
Actually, after thinking about this some more, here is what I propose. In 
standard mode, make the outer table auto height (since the body has no computed 
height) and the inner table auto height. In quirks mode, do what Nav4.x does and 
give the outer table a percent height (as a percent of the viewport less margin, 
border, padding of the html and body) and make the inner table auto height since 
its containing block is the outer table's cell and not the outer table. IE is 
considering the containing block to be the table and not the cell which I think 
is wrong. 

So, I guess the gist of this is that I agree with this bug in quirks mode. In 
standard mode the behavior will be much different.

    
    

    
  
Fixed.
Status: ASSIGNED → RESOLVED
Closed: 24 years ago
Resolution: --- → FIXED

    
    

    
  
Using 7/13 build, testcase in Quirks mode operates like Nav4. Verifying bug 
fixed.
Status: RESOLVED → VERIFIED

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: