Closed Bug 305205 Opened 19 years ago Closed 19 years ago

Toggling 'display:none' and 'display:block' on TR tag produces garbage in output (IE works fine!)

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows Server 2003
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 97506

People

(Reporter: vadim, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

Here is the page that gives the error. Click "Advanced Search", and then click
on a checkbutton twice.

======================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>SSATP Search</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="Styles/Main.css" type="text/css" rel="STYLESHEET">
</head>

<script language="javascript">
<!--
function toggleBlock(p_sBlockName)
{
	//alert('Implement toggleBlock() !!!');
	block = document.getElementById(p_sBlockName);
	linktext = document.getElementById('TypeOfSearchLink');
	simpleKeywords = document.getElementById('SimpleKeywords');
	simpleButton = document.getElementById('SimpleButton');
	rowByKeywords = document.getElementById('BlockKeywords');
	rowByType = document.getElementById('BlockType');
	rowByTheme = document.getElementById('BlockTheme');
	rowByComponent = document.getElementById('BlockComponent');
	rowByDate = document.getElementById('BlockDate');
	
	if (block.style.display != 'none')
	{
		block.style.display = 'none';
		if (p_sBlockName == 'FieldedSearch')
		{
			linktext.innerHTML = 'Advanced Search';
			simpleKeywords.disabled = false;
			simpleButton.disabled = false;
			simpleKeywords.focus();
		}
		//document.fSearch.reset();
	}
	else
	{
		block.style.display = 'block';
		if (p_sBlockName == 'FieldedSearch')
		{
			linktext.innerHTML = 'Return to Simple Search';
			simpleKeywords.disabled = true;
			simpleButton.disabled = true;
		}
		
	}
}

//-->
</script>

<table bordercolor="#004080" cellspacing="0" cellpadding="5" width="100%"
align="left" border="1">
<tbody>

<tr>
<td bgcolor="#99ccff"><b>Search SSATP Resources (v4)</b></td>
</tr>

<tr>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px;
PADDING-TOP: 10px">
<form name="fSearch"><input id="SimpleKeywords" style="WIDTH: 400px"
name="sKeywords" /> <input id="SimpleButton" onclick="javascript:
win=window.open('http://localhost/Search.aspx', 'search', 'width=550,
scrollable=1, toolbar=0, resizable=1, location=0, menubar=0');" type="button"
value="Search" />
<br />
<a href="javascript: toggleBlock('FieldedSearch');"><div id="TypeOfSearchLink"
style="margin: 5px 0 15px 0; ">Advanced Search</div></a>
<div id="FieldedSearch" style="display:none; ">
	&nbsp;
	<br />

	<table width="400" border="0" cellpadding="5" cellspacing="0">
		<tr>
			<td class="LGrey" colspan="2">Select one or more criteria:</td>
		</tr>
		<!-- spacer row is at the bottom of the table -->
		<tr>
			<td class="DGrey" valign="top"><input type="checkbox" id="CBbyKeywords"
name="CBbyKeywords" onClick="javascript: toggleBlock('BlockKeywords');" /></td>
			<td class="DGrey" nowrap><b>by Keyword(s)</b></td>

		</tr>
		<tr id="BlockKeywords" style="display:none; ">
			<td class="DGrey">&nbsp;</td>
			<td class="LGreyPadded">
				<input type="text" id="AdvancedKeywords" name="sAdvancedKeywords"
style="width: 400px; " />
				<br />
				Require:
				&nbsp;&nbsp;
				<input type="radio" id="RbAllAny" name="bAllAny" value="All" checked /> All
words
				&nbsp;&nbsp;

				<input type="radio" id="RbAllAny" name="bAllAny" value="Any" /> Any word
				&nbsp;&nbsp;
				<input type="radio" id="RbAllAny" name="bAllAny" value="Exact" /> Exact phrase
			</td>
		</tr>
		<tr>
			<td class="DGrey"><input type="checkbox" id="CBbyType" name="CBbyType"
onClick="javascript: toggleBlock('BlockType');" /></td>
			<td class="DGrey" nowrap><b>by Resource Type</b></td>

		</tr>
		<tr id="BlockType" style="display:none; ">
			<td class="DGrey">&nbsp;</td>
			<td class="LGreyPadded">
				<select name="iType" style="width: 330px;">
					<option value="0">00: UNSORTED</option>
					<option value="1">01: Unclassified Resources</option>
					<option value="10">10: PUBLICATIONS</option>

					<option value="11">11: CD-ROMs</option>
					<option value="12">12: Discussion Papers</option>
					<option value="13">13: Presentations</option>
					<option value="14">14: Technical Notes</option>
					<option value="15">15: Technical Papers</option>
					<option value="16">16: Working Papers</option>

					<option value="17">17: Promotional Materials (Brochures, Leaflets)</option>
					<option value="20">20: REPORTS</option>
					<option value="21">21: Workshop Reports</option>
					<option value="22">22: Country Reports</option>
					<option value="30">30: CONFERENCE MATERIALS</option>
					<option value="31">31: Proceedings</option>

					<option value="32">32: Conference Reports</option>
					<option value="33">33: Speeches</option>
					<option value="34">34: Press Clippings</option>
					<option value="40">40: SSATP PROGRAM DOCUMENTS</option>
					<option value="41">41: Work Programs</option>
					<option value="42">42: Annual Reports</option>

					<option value="50">50: LEGAL &amp; REGULATORY DOCUMENTS</option>
					<option value="60">60: ONLINE NEWSLETTER</option>
					<option value="61">61: PMN</option>
					<option value="62" selected="selected">62: RMI Update</option>
					<option value="70">70: DATA &amp; INDICATORS</option>

					<option value="71">71: Databases</option>
					<option value="72">72: Matrices</option>
					<option value="80">80: KNOWLEDGE BASES</option>
					<option value="90">90: TOOLS</option>
					<option value="100">100: TOOLKITS</option>
					<option value="110">110: TRAINING MATERIALS</option>

				</select>
			</td>
		</tr>
		<tr>
			<td class="DGrey"><input type="checkbox" id="CBbyTheme" name="CBbyTheme"
onClick="javascript: toggleBlock('BlockTheme');" /></td>
			<td class="DGrey" nowrap><b>by Theme</b></td>
		</tr>
		<tr id="BlockTheme" style="display:none; ">

			<td class="DGrey">&nbsp;</td>
			<td class="LGreyPadded">
				<select name="iTheme" style="width: 400px;">
					<option value="0">00: OTHER</option>
					<option value="1">01: Other Subtheme</option>
					<option value="10">10: TRANSPORT STRATEGIES</option>
					<option value="11">11: General</option>

					<option value="12">12: Poverty Reduction &amp; Growth</option>
					<option value="13">13: Data &amp; Indicators</option>
					<option value="20">20: ROAD MANAGEMENT &amp; FINANCING</option>
					<option value="21" selected="selected">21: General</option>

					<option value="22">22: Financing</option>
					<option value="23">23: Management</option>
					<option value="30">30: TRANSPORT SERVICES</option>
					<option value="31">31: General</option>
					<option value="32">32: Urban Mobility</option>
					<option value="33">33: Rural Mobility</option>

					<option value="34">34: Interurban/Transrural</option>
					<option value="40">40: REGIONAL INTEGRATION</option>
					<option value="41">41: General</option>
					<option value="42">42: Transit &amp; Interstate Corridors</option>
					<option value="43">43: Trade Facilitation</option>

					<option value="50">50: CROSS-CUTTING ISSUES</option>
					<option value="51">51: Gender Equity</option>
					<option value="52">52: Employment Generation</option>
					<option value="53">53: Safety &amp; Security</option>
					<option value="54">54: HIV/AIDS</option>

					<option value="55">55: Environment</option>
					<option value="60">60: SSATP PROGRAM (PARTNERSHIP, MANAGEMENT)</option>
					<option value="61">61: Strategies, Programs</option>
					<option value="62">62: Meetings</option>
				</select>
			</td>
		</tr>

		<tr>
			<td class="DGrey"><input type="checkbox" id="CBbyComponent"
name="CBbyComponent" onClick="javascript: toggleBlock('BlockComponent');" /></td>
			<td class="DGrey" nowrap><b>by Component</b></td>
		</tr>
		<tr id="BlockComponent" style="display:none; ">
			<td class="DGrey">&nbsp;</td>
			<td class="LGreyPadded">
				<select name="iComponent" style="width: 300px;">

					<option value="1">01: Road Management Initiative (RMI)</option>
					<option value="2">02: Rural Travel and Transport Program (RTTP)</option>
					<option value="3">03: Urban Mobility (UM)</option>
					<option value="4">04: Trade and Transport (T&amp;T)</option>
					<option value="5" selected="selected">05: Railway Restructuring (RR)</option>
				</select>

			</td>
		</tr>
		<tr>
			<td class="DGrey"><input type="checkbox" id="CBbyDate" name="CBbyDate"
onClick="javascript: toggleBlock('BlockDate');" /></td>
			<td class="DGrey" nowrap><b>by Date of Publication</b></td>
		</tr>
		<tr id="BlockDate" style="display:none; ">
			<td class="DGrey">&nbsp;</td>

			<td class="LGreyPadded">
				<table border="0">
					<tr><td>From</td>
						<td> 
						<select name="iPubYear" style="width: 60px;">
							<option value="0">..</option>
							<option value="1970">1970</option>
							<option value="1971">1971</option>

							<option value="1972">1972</option>
							<option value="1973">1973</option>
							<option value="1974">1974</option>
							<option value="1975">1975</option>
							<option value="1976">1976</option>
							<option value="1977">1977</option>

							<option value="1978">1978</option>
							<option value="1979">1979</option>
							<option value="1980">1980</option>
							<option value="1981">1981</option>
							<option value="1982">1982</option>
							<option value="1983">1983</option>

							<option value="1984">1984</option>
							<option value="1985">1985</option>
							<option value="1986">1986</option>
							<option value="1987">1987</option>
							<option value="1988">1988</option>
							<option value="1989">1989</option>

							<option value="1990">1990</option>
							<option value="1991">1991</option>
							<option value="1992">1992</option>
							<option value="1993">1993</option>
							<option value="1994">1994</option>
							<option value="1995">1995</option>

							<option value="1996">1996</option>
							<option value="1997">1997</option>
							<option value="1998">1998</option>
							<option value="1999">1999</option>
							<option value="2000">2000</option>
							<option value="2001">2001</option>

							<option value="2002">2002</option>
							<option value="2003">2003</option>
							<option value="2004">2004</option>
							<option value="2005" selected="selected">2005</option>
						</select>
						<select name="iPubMonth" style="width: 150px;">
							<option value="0">..</option>

							<option value="1">01: January</option>
							<option value="2">02: February</option>
							<option value="3">03: March</option>
							<option value="4">04: April</option>
							<option value="5">05: May</option>
							<option value="6">06: June</option>

							<option value="7">07: July</option>
							<option value="8" selected="selected">08: August</option>
							<option value="9">09: September</option>
							<option value="10">10: October</option>
							<option value="11">11: November</option>
							<option value="12">12: December</option>

						</select>
						<select name="iPubDay" style="width: 50px;">
							<option value="0">..</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>

							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>

							<option value="11">11</option>
							<option value="12">12</option>
							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15" selected="selected">15</option>
							<option value="16">16</option>

							<option value="17">17</option>
							<option value="18">18</option>
							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>

							<option value="23">23</option>
							<option value="24">24</option>
							<option value="25">25</option>
							<option value="26">26</option>
							<option value="27">27</option>
							<option value="28">28</option>

							<option value="29">29</option>
							<option value="30">30</option>
							<option value="31">31</option>
						</select>
						</td>
					</tr>
					<tr><td>To</td>

						<td>
						<select name="iPubYear" style="width: 60px;">
							<option value="0">..</option>
							<option value="1970">1970</option>
							<option value="1971">1971</option>
							<option value="1972">1972</option>
							<option value="1973">1973</option>

							<option value="1974">1974</option>
							<option value="1975">1975</option>
							<option value="1976">1976</option>
							<option value="1977">1977</option>
							<option value="1978">1978</option>
							<option value="1979">1979</option>

							<option value="1980">1980</option>
							<option value="1981">1981</option>
							<option value="1982">1982</option>
							<option value="1983">1983</option>
							<option value="1984">1984</option>
							<option value="1985">1985</option>

							<option value="1986">1986</option>
							<option value="1987">1987</option>
							<option value="1988">1988</option>
							<option value="1989">1989</option>
							<option value="1990">1990</option>
							<option value="1991">1991</option>

							<option value="1992">1992</option>
							<option value="1993">1993</option>
							<option value="1994">1994</option>
							<option value="1995">1995</option>
							<option value="1996">1996</option>
							<option value="1997">1997</option>

							<option value="1998">1998</option>
							<option value="1999">1999</option>
							<option value="2000">2000</option>
							<option value="2001">2001</option>
							<option value="2002">2002</option>
							<option value="2003">2003</option>

							<option value="2004">2004</option>
							<option value="2005" selected="selected">2005</option>
						</select>
						<select name="iPubMonth" style="width: 150px;">
							<option value="0">..</option>
							<option value="1">01: January</option>
							<option value="2">02: February</option>

							<option value="3">03: March</option>
							<option value="4">04: April</option>
							<option value="5">05: May</option>
							<option value="6">06: June</option>
							<option value="7">07: July</option>
							<option value="8" selected="selected">08: August</option>

							<option value="9">09: September</option>
							<option value="10">10: October</option>
							<option value="11">11: November</option>
							<option value="12">12: December</option>
						</select>
						<select name="iPubDay" style="width: 50px;">
							<option value="0">..</option>

							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>

							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>

							<option value="13">13</option>
							<option value="14">14</option>
							<option value="15" selected="selected">15</option>
							<option value="16">16</option>
							<option value="17">17</option>
							<option value="18">18</option>

							<option value="19">19</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>

							<option value="25">25</option>
							<option value="26">26</option>
							<option value="27">27</option>
							<option value="28">28</option>
							<option value="29">29</option>
							<option value="30">30</option>

							<option value="31">31</option>
						</select>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>

			<td class="DGrey"  width="20"><img src="images/spacer.gif" width="20"
height="20"></td>
			<td class="DGrey" width="380"><img src="images/spacer.gif" width="380"
height="20"></td>
		</tr>
	</table>
</div>
</form>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>

<td></td>
</tr>
</table>

<body>
</body>
</html>


Reproducible: Always

Steps to Reproduce:
1. Please use code that I included in details section.
2.
3.

Actual Results:  
Browser generated extra white space after every 2 clicks on a checkbox.

Expected Results:  
Just show/hide a block.

*** This bug has been marked as a duplicate of 97506 ***
Status: UNCONFIRMED → RESOLVED
Closed: 19 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.