Closed Bug 223077 Opened 21 years ago Closed 15 years ago

Using overflow:auto on tbody causes its cells to be different widths than thead's cells widths

Categories

(Core :: Layout: Tables, defect)

Product:
Core
Component:
Layout: Tables
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: krh, Unassigned)

References

(
URL
)

Details

(Keywords: testcase)

Attachments

(2 files, 1 obsolete file)

Example of faulty rendering
55.43 KB, image/gif
Details
more reduced testcase
786 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007

The Table Layout in the test case will sometimes (most times) render
incorrectly, leading to table cells missing or in wrong places (shifted a couple
of columns to the right), or cell heights suddenly being twice or thrice as tall
as needed.

Reproducible: Always

Steps to Reproduce:
1. View the test case
2. Scroll down in the scrollable table until you see a layout problem
3. Reload page and try again if you don't see any problem

Actual Results:  
Table Layout was incorrect (see GIF image at
http://epguides.info/TBODY/TBODY.GIF for example)

Expected Results:  
Rendered the cells in their proper place instead of shifting them to the right

Problem was in 1.4 as well, but I wanted to wait until 1.5 was relased in case
the bug was fixed.

    
    

    
  
Complete test case for offline viewing can be downloaded at

http://epguides.info/TBODY/TBODY.ZIP


    
    

    
  
WFM on WinXP trunk 2003102004.

Reporter: please download a recent nightly build from
<http://ftp.mozilla.org/pub/mozilla.org/mozilla/nightly/latest/> and try again.
If it works, please resolve this bug as WFM. Thanks !

    
    

    
  
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.6a) Gecko/20031021

There is a strange thing going on here, 
Opera 7.20 has only a scrollbar to the right, scrolling the whole document.
Mozilla has this too, baut also a second scrollbar just at the border of the table.

Clicking on the Validator link, something gets validated as valid HTML 4.01
transitional, but not this file here.

Calling validator manually with this URL inserted, I had to override the
doctype, to reduce the errors from 1281 to 1.

From the source:
<!DOCTYPE HTML><html><head>
  <link HREF="http://sttng.epguides.info/enterprise.ICO" REL="SHORTCUT ICON">
  <meta CONTENT="Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5)
Gecko/20031007" NAME="UserAgent">

That seems to be hardcoded, as I´m using BuildID 2003102104,
and at a rough glance Opera 7.20 is showing the same code.

http://validator.w3.org/check?uri=http%3A%2F%2Fepguides.info%2FTBODY%2FSTTNG.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepguides.info%2FTBODY%2FSTTNG.htm&warning=1&profile=css2&usermedium=all

I made a local copy of the page, and there was no difference to the website,
seen with opera and Mozilla.
I replaced <Doctype HTML> with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Still same difference:
Opera shows one scrollbar for the document, Mozilla shows additionally a
horizontal and a vertical scrollbar for the table.
Maybe that is because my screen resolution is 800x600, and they recommend
1024x768, but Opera is fine with 800x600.
I didn´t see the black area shown in the attachment, but as I´m not on
broadband, I didn´t clear the cache.




    
    

    
  
The nightly build is much, much better, but there's still a couple of issues:

1) There is suddenly a horizontal scroll bar. How do I eliminate this (CSS?).
Mozilla should not span the last column in under the scroll bar as it currently
does - the heading should span all the way, but the cells below it should be
limited to not include the scroll bar. Or perhaps the scroll bar should be
entirely outside the columns (ie. the heading should also be limited to the area
up to, but excluding, the scroll bar).

2) Sometimes, the rows are taller than they need to be. See screen shots at

http://epguides.info/TBODY/Problem1.GIF and
http://epguides.info/TBODY/Problem2.GIF 

3) As you can see from Problem1, the misalignment of columns also still happens
- but very rarely.


    
    

    
  
Good! Have you tried using a new profile ? Go to Tools->Switch Profile... and
make a new one. Then quit all Mozilla windows and restart it using that profile.

    
    

    
  
The problem is the same - see

http://epguides.info/TBODY/Problem3.GIF

As you can see, the "Log On to vote" text has disappeared from episode 154
(probably pushed out beyond the scroll bar), and the row is unnecessary tall.

However, it is still much, much better than v1.5 was.

    
    

    
  
The black area shown in <http://epguides.info/TBODY/Problem3.GIF> appears in my
build as well now. I can not, however, track it down with DOM Inspector.

I don't see any CSS or HTML that should produce this black area.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: qawanted

    
    

    
  
Reporter: this seems to WFM now on build 2003102804. Could you try again ? thanks.

    
    

    
  
The first test case now appears to work properly, but I have another one that
doesn't:

http://epguides.info/TBODY/Armin.htm

I have changed the source in one place from the one saved by Mozilla - I have
changed BORDER=0 to BORDER=1 for the table to illustrate where Mozilla
mis-aligns the table body cells with the table header cells...

This is with Mozilla 1.6 build 2003102804.

    
    

    
  


  
Attched a simplified test case for the second URL provided by the Reporter. The
page shows the misaligned table header with other cells.

Looks like number of characters in the html page matters for this problem to
occur. Even if I reduce any unnecessary characters from the page, problem
disappears.

    
    

    
  

      
      
      
      

        Attached file
          
        more reduced testcase
        — 
      

    


  

        Attachment #152490 -
        Attachment is obsolete: true

    
  
Keywords: qawanted → testcase
Summary: Improper Table Layout when using TBODY and overflow:auto → Using overflow:auto on tbody causes its cells to be different widths than thead's cells widths

    
    

    
  
*** Bug 319167 has been marked as a duplicate of this bug. ***

    
    

    
  
(In reply to comment #12)
> Created an attachment (id=161308) [details]
> more reduced testcase
> 

This testcase with a defined table height illustrates another bug which could be related:
Compare the renderings of (Gecko/2008010605 Minefield/3.0b3pre) and (Gecko/20071127 Firefox/2.0.0.11).  
The difference is the height of the cells: 
  Firefox 2 renders in the way everyone's used to and the way it should be (Opera 9.25 does the same).
  Firefox 3 stretches the height of the cells, as do MSIE6 and MSIE7.

Now from a web developers' point of view, this may break the layout of some apps which rely on the traditional behaviour.

The standard <http://www.w3.org/TR/CSS21/tables.html#height-layout> says:

  "The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's specified 'height' and the minimum height (MIN) required by the cells."

Even with height specifications, say style="height:1em" applied to both TRs and TDs, Firefox 3 stretches the rows' height.  IMHO: Without a CSS switch for the TABLE element in the form of "-moz-table-row-height-algo" the behaviour observed in Firefox 3 is unacceptable.

To the developers: Is this a bug or a feature?


    
    

    
  
the testcase is wfm
Status: NEW → RESOLVED
Closed: 15 years ago
Resolution: --- → WORKSFORME

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: