troubleshooting Question

table border shows on hidden DIV, IE9

Avatar of Mark
Mark asked on
CSSHTML
3 Comments1 Solution668 ViewsLast Modified:
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>

Ghost table border shows on hidden DIV
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros