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)

x86
Windows XP
defect
Not set
major

Tracking

()

RESOLVED DUPLICATE of bug 97506

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>

*** 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.