Overlay isnt working correctly in IE7 Created Nov 7, 2009

Hi Everyone -

I have a weird issue with tools overlay. Tools overlay with apple effect works perfectly fine on FF but the overlay isnt working correctly in IE7

In my case, I have an overlay with form input elements with a background image. The overlay pops up when clicked on a hyperlink.

Here is the code

For the hyperlink

<a style="font-size:11px;" id="showStatus" href="#" rel="#updateStatus">(Update Status?)</a>

In my jsp code, the overlay initialized this way

<script type="text/javascript">
  $(document).ready(function(){
     $("#showStatus").overlay({expose:'#000',   effect:'apple', onBeforeLoad:function(){launchStatus();}});
</script>

The overlay that should show up has a form element in it

<div style="width:550px;height:360px;" id="updatePersonalStatus" class="overlay" >
  <textarea class="posted_item_small_textarea" id="personalStatus" name="personalStatus"></textarea>
</div>

My CSS looks like this

/* the overlayed element */
div.overlay {
    
    /* growing background image */
    background:url(./images/overlay.png);
    
    opacity:0.6;

    /* dimensions after the growing animation finishes  */
    width:550px;
    height:360px;       

    /* initially overlay is hidden */
    display:none;
    
    /* some padding to layout nested elements nicely  */
    padding-top:15px;
    padding-left:15px;

    /*color:#fff;*/
}

When the overlay shows up, all I see is the background image and my form elements dont show up.

Has anyone seen this issue before? If so, what is the resolution

Thanks much!