[SOLVED] Simple Disappearing text Bug in IE 7

[zatoichi]

I have a stripped down my working page to this very simple example of my problem.

This example works fine in Firefox, but not in IE 7.

When you mouseover the mouseover link some of the text disappears.

The problem seems to be structural. 

Changing page structure fixes the problem, but breaks the effect that I am trying to use.

Deleting the width parameter from either the table or the div also fixes the page.  ?????

All I want to do is dynamically change the style in the test area without anything else on the page changing.

 

Here it is....

 

div { position:relative; border:solid 1px red; }

div#main { width:500px; border:solid 1px green; }

table { border:solid 1px orange; }

tr,th,td { padding:2px; border:solid 1px #00ffff; }

.testStyle { background-color:#dddddd; }

 

<div id="main">

<DIV>

  <TABLE width="50%"><TBODY>

  <TR><TD>TEST 1</TD><TD><DIV>TEST 2</DIV></TD><TD><DIV>TEST 3</DIV></TD></TR>

  </TBODY></TABLE>

</DIV>

 

<TABLE><TBODY>

  <TR><TD>

    <SPAN><A onmouseover="document.getElementById('popupTest').className = 'testStyle';" href="#">MOUSEOVER</A></SPAN>

    <DIV id=popupTest>TEST AREA 2</DIV>

  </TD></TR>

</TBODY></TABLE>

</div>

 

[zatoichi]

Fixed this by changing the structure to one that has fewer nested divs.  Nothing else seemed to work.

 

<div id="main">
  <TABLE width="50%"><TBODY>
   <TR><TD>TEST 1</TD><TD><DIV>TEST 2</DIV></TD><TD><DIV>TEST 3</DIV></TD></TR>
  </TBODY></TABLE>

<TABLE><TBODY>
  <TR><TD>
    <SPAN><A onmouseover="document.getElementById('popupTest').className = 'testStyle';" href="#">MOUSEOVER[/url]</SPAN>
    <DIV id=popupTest>TEST AREA 2</DIV>
  </TD></TR>
</TBODY></TABLE>
</div>