Divs swapping when the mouse hits line height in IE

[ichabodcrane]

The below works great in FF. But in IE when the backgrounds are swapped and you mouse over the copy, it jumps back swaps the divs when your mouse hits the line height. Any ideas?

<script type="text/javascript" language="JavaScript"><!--
function HideDIV(d) { document.getElementById(d).style.display = "none"; }
function DisplayDIV(d) { document.getElementById(d).style.display = "block"; }
//--></script>

<span onmouseover="HideDIV('testDiv');DisplayDIV('testDivCopy');" style="cursor:pointer; height:477px; width:299px;">

<div id="testDiv" style="display:block; background-image:url(images/testBlock1.jpg); height:477px; width:299px; background-repeat:no-repeat; padding:0; margin:0;" >

</div>

</span>

<span style="height:477px; width:299px;" onmouseout="HideDIV('testDivCopy');DisplayDIV('testDiv');">

<div id="testDivCopy" style="background-image:url('images/testBlock1Over.jpg'); height:477px; width:299px; background-repeat:no-repeat; display:none; padding:0; margin-top:200;">

<div style="padding-top:200px; padding-right:0px; padding-left:0px;max-height:280px; ">
copy here... copy here copy here

<a href="test/" class="readMore">Read More...</a>
</div>

</div>

</span>

[willis1480]

Im not understanding what your trying to do.

But Ill give you my best answer. You are collapsing the DIVs, however; the SPAN elements are not collapsed and the mouse events are tied to the SPANs.

Are you just trying to get the "read more" to show more info?

If so tie the mouse events to the A tag.

[alias]

Why would you have a block level DIV element in an inline level element SPAN? It might very well be an issue for IE (have no means of testing it atm).

This is not valid markup, so for the beginning I would offer you to make it valid.