431923 - javascript innerhtml to inline show a row with display none does not align proper

Status: RESOLVED DUPLICATE of bug 291045

(Firefox :: General, defect)

Description

[Tushar Kapila]

User-Agent:       Opera/9.25 (Windows NT 5.1; U; en)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

this page works in ie 6 and 7 but not in properly in mozilla no error but the table does not align proper when i make a tr tag 

from r1.style.display="none";

to 
r1.style.display="inline";
or
r1.style.display="block";

full page source is 

<div id =mn>
<form name=f1 action=plan.php method=post enctype="multipart/form-data">
<table width=80%>
<tr ><td width='25%'>
Företag:
</td><td width='60%' align=left valign=left><input />
</td></tr>
<tr><td width='25%'>
Kontaktperson:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Adress:
</td><td width='60%'><input />
</td></tr>

<tr><td width='25%'>


Post-nr/Stad:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Tel:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


E-mail:
</td><td width='60%'><input />

</td></tr>
<tr><td width='25%'>


Webbsida:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Org-nr:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Typ av tjänst:

</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Övrigt:
</td><td width='60%'><input />
</td></tr>
<tr><td width='25%'>


Fil 1
</td><td width='60%'><input name="ufile[]" type="file" id="ufile[]"  />
</td></tr>
<tr><td width='25%'>

Fil 2

</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r3><td width='25%'>
Fil 3
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r4><td width='25%'>
Fil 4
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r5><td width='25%' >

Fil 5
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r6><td width='25%'>
Fil 6
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r7><td width='25%'>
Fil 7
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>

<tr style="" id=r8><td width='25%'>

Fil 8
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>


<tr style="" id=r9><td width='25%'>
Fil 9
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>

<tr style="" id=r10><td width='25%'>
Fil 10
</td><td width='60%'><input type=file name="ufile[]"  >
</td></tr>

<tr><td width='25%'>&nsbp;

</td><td ><input name="ad2" type="button" value="Add 2 more file uploads" onclick='ad()' />
</td></tr>
<script>
cnt =2
function ad(){
if(cnt==10){
	alert("Maximum 10 files");
	return;
}
//alert(" " + cnt);
cnt+=2;

mores = document.getElementById("mores");
//alert("a " + cnt);
r1 =  document.getElementById("r" + cnt);
//alert("b " + cnt);
//alert(r1 + " " + r1.innerHTML);
r1.style.display="block";
r1 =  document.getElementById("r" + (cnt-1));
//r1.style.display="inline";
r1.style.display="block";

//r1.style.display="none";

if(cnt==10){
	document.f1.ad2.disabled = true;
}
//r1 = document.getElementById("mn");
//r1.innerHTML = r1.innerHTML + " <br> 1 <br>";
}


cnt1 = 5;
for(cnt1 =3; cnt1 < 11 ; cnt1++){
	r1 =  document.getElementById("r" + (cnt1));
	r1.style.display="none";
}

</script>

<tr>
<td width='25%' >
<input type=submit value='Skicka'>
</td>
<td width='60%'><input type=reset value= "Reset form">

<input type=hidden name=a value=g>
</td>
</tr>
</table>
</form>

</div>

<!--
<br>

(Send button)


<div style="display: none" >aasd</div>
-->




Reproducible: Always

Steps to Reproduce:
1.go to page or save src and load
2.press button 'Add 2 more file uploads '
3.observe the fil 3 and fil 4 row alignments
4. comment out r1.style.display="none"; and try again - will show up fine initally (but we want it hidden initially)
Actual Results:  
alignment of hidden rows not ok when shown

Expected Results:  
alignment should be fine

none

Comment 1

[Tushar Kapila]

ie = internet explorer browser

firefox used 2.0.0.14

Comment 2

[Dave Townsend [:mossop]]

block and inline are not sensible values for display for table rows. Try table-row instead (or null which will work pretty much everywhere)