Solved: table border shows on hidden DIV, IE9

I have a DIV that loads hidden and gets revealed when the cursor hovers over a button. This is a typical drop-down menu scenario. The problem is, when the page first loads (DIV hidden), the table border shows! See image 1st panel. When I hover over the button, the table shows, as expected (2nd panel), and when I leave the button, the table is hidden, this time the borders are hidden also (3rd panel). This only happens in IE9. It works as expected in IE8 and fireFox (no border on initial load). if I select "Compatibility View" (i.e. "fix things broken in IE9 mode") it works as expected: no border on initial load. Of course, I don't want my customers to have to use compability mode to use this form.

Any suggestions on how to make this work in IE9?

here is the HTML snippet involved:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
:
:
<style>
table.reportDrop {border-collapse: collapse;}

table.reportDrop td {
  color: rgb(0,0,180);
  font-weight: bold;
  font-size: 10pt;
  background-image: url(images/blueButton.jpg);
  border: 1px solid rgb(0,84,159);
}
</style>

:
:

<DIV style="position:relative">

  <button type=button onmouseover="document.getElementById('reportSEL').style.visibility='visible'"
    onmouseout="document.getElementById('reportSEL').style.visibility='hidden'">Reports</button>

  <div id=reportSEL style="position:absolute; top: 20px; left: 260px; visibility: hidden"
   onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">
  <table class=reportDrop style="width: 110px">
  <tr>
    <td onmouseover="this.style.fontSize='larger'"
        onmouseout="this.style.fontSize='10pt'"
        onclick="location='prospectList.jsp'">
      Prospect List
    </td>
  </tr>
  <tr>
    <td onmouseover="this.style.fontSize='larger'"
        onmouseout="this.style.fontSize='10pt'">
      report 2
    </td>
  </tr>
  </table>
  </div>
</DIV>

Open in new window