Expose function in IE problem while expose-ing inner div Created Jul 12, 2009

Hello,

I want to expose a div which is the child of another div.

<style>
#parent {
	width:220px;
	float:left;
	position:relative;
}
#child {
	background-image:url(someimage.gif);
	background-repeat:no-repeat;
	position:absolute;
	top:0px;
	height:291px;
	max-height:291px;
	width:220px;
	display:none;
	background-color:#6F0;
}
</style>

<div id="parent">

  <div id="child">
    <h1>Hello</h1>
  </div>

  <div class="button">
    <img id="buttonX" src="somebutton.jpg" />
  </div>

</div>

$(function() {

  $('#buttonX').click(function() {
       $('#parent #child').show("slow");
       $('#parent #child').expose({
          api: true,
          onClose: function() {
            $('#parent #child').hide();
          }
       }).load();
  });

});

The intention is that the user clicks on the button, and then
a new DIV appears over the button and is expose'd.
In Firefox this is working perfectly.
But in IE (6 and 7) the whole screen turns grey, not only
the outside of the 'child'-div but the whole screen.

I found a solution in changing the 'position:relative' to
'position:inherit' of the parent.
Above 'parent' there is a grandparent which also has to be
'position:inherit'.

What is going wrong here?
Hope somebody can help me here.

Thanks,

Bert