Closed
Bug 272838
Opened 20 years ago
Closed 20 years ago
bad rendering of table elements when hiding/showing table rows using javascript
Categories
(Firefox :: General, defect)
Tracking
()
People
(Reporter: philipp.grosswiler, Assigned: bugzilla)
References
()
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0 I am trying to use one big container (<div> around <table>), with one main area inside the <table> using 100% height, and multiple smaller areas below the main area (but all in the big container). Firefox correctly renders the first time you open the page. But when you start to play around by hiding/showing some of the smaller areas, Firefox renders the table incorrectly. It seems like Firefox isn't calculating the new heights of the table rows correctly. However, it works in IE as it should. Reproducible: Always Steps to Reproduce: First Pass: 1. Open the page http://217.148.9.14/tests/table-display.html 2. You will see three areas, "Green", "Blue" and "Orange". There is one big "Red" area behind all them (the main container <div>). 3. Click on "Orange" to hide the area. There is already the first bug: it does hide the area, but it doesn't resize the table, so the area is still the same height as before. 4. Now click on the very same "Orange" button to make the area visible again. 5. Click on "Orange" the third time, and Firefox does it correct, the area is hidden and the table height is correctly rendered. Second Pass: 1. Open the page http://217.148.9.14/tests/table-display.html 2. You will see three areas, "Green", "Blue" and "Orange". There is one big "Red" area behind all them (the main container <div>). 3. Click on "Orange" and "Blue". This will show the same problem like above. 4. Now click on "Blue" again. This will make the "Blue" area visible again and at the same time correct the "Orange" area by resizing. 5. Click "Blue" again to hide it. Firefox is doing it correct now. 6. Click on "Orange" and then "Blue". Firefox suddenly shows scrollbars where it shouldn't. 7. Now "fake" click on any button and Firefox corrects the display. By "fake" click I mean to only press the mouse button down, without releasing it. Actual Results: Firefox renders the table layout incorrectly after pressing some buttons in a certain way. Expected Results: Firefox should render the layout correctly in the beginning, as it does when playing around further. For your convienence, I copied the source code of the HTML causing the problem: <div style="background-color: red; width: 100%; height: 400; overflow: auto;"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td width="100%" height="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td> <button onclick="document.getElementById('_green').style.display = ( document.getElementById('_green').style.display == 'none' ) ? '' : 'none';">Green</button> </td> </tr> <tr id="_green"> <td width="100%" height="100%"> <div style="background-color: green; width: 100%; height: 100%; overflow: auto;"> </div> </td> </tr> </table> </td> </tr> <tr> <td width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td> <button onclick="document.getElementById('_blue').style.display = ( document.getElementById('_blue').style.display == 'none' ) ? '' : 'none';">Blue</button> </td> </tr> <tr id="_blue"> <td> <div style="background-color: blue; width: 100%; height: 100; overflow: auto;"> </div> </td> </tr> </table> </td> </tr> <tr> <td width="100%"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td> <button onclick="document.getElementById('_orange').style.display = ( document.getElementById('_orange').style.display == 'none' ) ? '' : 'none';">Orange</button> </td> </tr> <tr id="_orange"> <td> <div style="background-color: orange; width: 100%; height: 100; overflow: auto;"> </div> </td> </tr> </table> </td> </tr> </table> </div>
Comment 1•20 years ago
|
||
*** This bug has been marked as a duplicate of 97506 ***
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•