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