CSS/Javascript Display/Hide issue

[mtran]

I have a long form, but here's the brief version. The form has 2 section. Section 1 with 2 checkboxes letting people select product 1, 2. Section 2 display the price based on what people selected in Section 1. If they select Product 1, then only the price for 1 will show up; same for 2; and if they select 1 and 2, then only the price for the combo will show up.
I do this by simply toggling style display = none, or "" with onclick on the checkboxes.

Section 1:
+Product 1
+Product 2

Section2:
+Price for product 1
+Price for product 2
+Price for combo 1+2

The javascript is like this:


function en_cost(){
if (document.edocs.survey[0].checked){
document.getElementById("part_BCR").style.display=""; }

else {
document.getElementById("part_BCR").style.display="none";
document.getElementById("part_BCR_Combo").style.display="none"; }

if (document.edocs.survey[1].checked){
document.getElementById("part_ECR").style.display=""; }

else {
document.getElementById("part_ECR").style.display="none";
document.getElementById("part_BCR_Combo").style.display="none"; }

if (document.edocs.survey[0].checked && document.edocs.survey[1].checked ){
document.getElementById("part_BCR").style.display="none";
document.getElementById("part_ECR").style.display="none";
document.getElementById("part_BCR_Combo").style.display=""; }
}


Here's the extract of html for the price table in section 2:



<tr id="part_BCR" style="display:none;">
<td><input type="checkbox" class="checkbox" name="part_costs" value="BCR_2009" /></td>
<td>2009</td>
<td class="left">Survey 1</td>
<td>&nbsp;</td>
<td>$5,200</td>
</tr>

<tr id="part_ECR" style="display:none;">
<td><input type="checkbox" class="checkbox" name="part_costs" value="ECR_2009" /></td>
<td>2009</td>
<td class="left">Survey 2</td>
<td>&nbsp;</td>
<td>$3,800</td>
</tr>

<tr id="part_BCR_Combo" style="display:none;">
<td><input type="checkbox" class="checkbox" name="part_costs" value="BCR_ECR_combo_2009" /></td>
<td>2009</td>
<td class="left">Survey1 and 2 (multi-survey discount)</td>
<td>&nbsp;</td>
<td>$7,900<br />($1,100 discount)</td>
</tr>

The problem is in FF, everything works fine, but in IE there's a line that cut in the middle of the price table cell when selecting both 1 and 2 . See attached image: the top part is viewed in IE [not ok], the second part below the orange line is viewed in FF [OK]. Spent quite some time on this but could not get rid of the line.

Thanks for help!

[Snookerman]

What does that have to do with css?

[bluewalrus]

link to actual page? or you could try giving it a height