Avatar of Mark
Mark
 asked on

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


Ghost table border shows on hidden DIV
HTMLCSS

Avatar of undefined
Last Comment
Anuradha Goli

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Mark

ASKER
So, is the visibility style attribute deprecated, or is it just broken in IE9?
Anuradha Goli

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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy