Hi there, i have kind of a strange bug in IE 6/7/8 that i just can't figure out for the life of me so i thought i would consult some experts (thats you lot).

Basically i have a page with an image that is inside a div with an id of 'img_map'. Also inside #img_map is another div with a class of 'layout' and inside .layout are several divs all with a class of block on them (see HTML structure below).

Code:
<link rel="stylesheet" type="text/css" href="css/default.css" />
<div id="image-map-template">
    <div id="img_map"> <img src="images/bg.jpg" alt="Shop the Window" width="990" height="593" usemap="#map1" />
        <map name="map1" id="map1">
            <area shape="rect" coords="853,109,988,130" href="#" alt="Shop Key Pieces" />
        </map>
        <div class="layout">
            <div class="block item_1" style="width: 120px; height: 140px; z-index: 20; position: absolute; left: 124px; top: 325px;">
                <p> <a href="http://www.bbc.co.uk"><img src="images/info_bubble.gif" alt="Faded Flower Dress" width="97" height="60" /></a> </p>
            </div>
            <div class="block item_2" style="width: 160px; height: 100px; z-index: 30; position: absolute; left: 245px; top: 70px;">
                <p class="text_block">Here is a live text block <a href="http://www.bbc.co.uk">with a link</a> in the middle of it. Here is lots more text to test what will happen when the paragraph overflows its boundaries.</p>
            </div>
        </div>
    </div>
</div>
What i want is these block divs to appear on rollover with further details when someone rolls over part of the main image. I have used jQuery to add a class name of 'show' to the paragraph tags inside .block, when they are moused over. These p tags are initially set to display: none, and .show class on them simply sets display: block on them to display them.

So far so simple. This works fine on FF and Chrome but nothing doing in IE browsers. The reason for this seems to be because the main image is sitting over the block divs so jQuery can't actually 'see' the blocks to add the show class to them. I have narrowed this problem down to the fact that the main div (#img_map) has position relative on it. If i remove this then the rollover works but obviously the rollovers appear in the wrong place as the position: absolute on the .block divs throws it out of kilter.

So does anyone have any idea why this is happening, and how i fix it?

P.S. Stylesheet is attached and the jQuery code for the rollover is here:

Code:
			<script type="text/javascript">
            
		   $(document).ready(function() {
									  
				$("div.block").mouseover(function () {
					$(this).children().addClass("show");
					
					$(this).mouseout(function () {
						$(this).children().removeClass("show");
					});
				});
              
            });
            
            </script>