table border shows on hidden DIV, IE9

Mark
Mark used Ask the Experts™
on
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


Ghost table border shows on hidden DIV
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Data Scientist
Most Valuable Expert 2014
Commented:
instead of visibility try using display:none to hide, and display:block to show. (That would actually be the more standard way to do it.)

Author

Commented:
So, is the visibility style attribute deprecated, or is it just broken in IE9?
Anuradha GoliSystems Development / Support Specialist

Commented:
Try display instead of visibility

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial