A most peculiar IE problem

[derekn]

Wonder if anyone knows what's going on here...

I have a page which is generated via Perl that prints a number of data entries in a series of table rows. Each <tr> is assigned a unique id through perl, and when user mouseovers on each individual <tr>, the javascript is to change the background color to a "highlighted" color. The problem is THIS...

in IE 7 (not tested with other versions of IE), the first 4 rows do NOT perform action when mouseover occurs in <td 1>, <td 2>, or <td 3>. Then, it becomes a little quirky in row 5 when mouseovering in the aforementioned <td>'s. Then, after that, it works fine. Mozilla/Firefox works flawlessly throughout.

JS code:

<script language="javascript">
<!--
//id is unique id assigned to each tr, so we know what tr to alter
function doHighlight(id)
	{
	document.getElementById(id).style.backgroundColor = '#9FFFD7';
	}
//color is predetermined tr background color to return to
function doNormal(color,id)
	{
	document.getElementById(id).style.backgroundColor = color;
	}
//-->
</script>

Perl-generated HTML Code:

<tr id="$rowcounter" align=center class="$rowcolor" onMouseOver="doHighlight('$rowcounter');" onMouseOut="doNormal('$offcolor','$rowcounter');">
<td align=center class="tds">$enumber</td>
<td align=center class="tds">$div[0]</td>
<td align=center class="tds">$rightdate</td>
<td align=center class="tds">$div[2]</td>
<td align=center class="tds">$div[3]</td>
<td align=center class="tds">$pm\$<font color=$redgreenblack>$f_amt</font></td>
<td align=center class="tds"><font size=1><a href="mm.cgi?op=TOP&temp=edit&id=$div[1]" target="topwin">Edit</a></font></td>
<td align=center class="tds"><input name="numbers" type=checkbox value="$div[4]"><input type=hidden name="op" value="$js_op"></td>
</tr>

Wondering if anyone has encountered this or has a clue what is going on here.

Thanks,
Derek

[sysel]

What about simply:

<tr ... ... onMouseOver="this.style.backgroundColor = 'pink';" onMouseOut="this.style.backgroundColor = 'white';">

This is not the case for use the machinegun :-)

[derekn]

What about simply:

<tr ... ... onMouseOver="this.style.backgroundColor = 'pink';" onMouseOut="this.style.backgroundColor = 'white';">

This is not the case for use the machinegun :-)

That is simply another way of doing it. There is nothing wrong with the function calls or syntax with what I am doing. Your suggestion doesn't address the problem that I have with IE. It is obviously some kind of quirk or bug with IE and I would really like to know if anyone else knows why it is doing this or how it could be addressed. Again, it only does it on the first 4 lines in IE. Mozilla is fine all the way down. Also keep in mind that each <tr> block is EXACTLY the same all the way down, as they are generated by a loop in the Perl file.

[derekn]

Found the problem: problem was not IE, it was a hidden table getting in "the way" of the mouseover. Fixed it by adjusting the z-index to -1 when element is hidden, in addition to the "visibility" property. When element is shown, z-index changed to 1.