Strange layout problem in IE6

Question

URL: http://www.hkpete.com/test.html

jQuery 1.42
jQuery Tools 1.2.3 overlay

IE7 has this problem too (tested on ietester)

I can not find where the problems lie.

Thanks a lot.

<div id="dialog-content">
    <!--Login -->
    <div id="login" class="panel" style="display:none">
    Login..................
    </div>
    <!--Register -->
    <div id="register" class="panel" style="display:none">
    Register..................
    </div>
</div>

<!--Links-->
<a href="javascript:;" onclick="showDialog('#login','member');">Login</a>
<a href="javascript:;" onclick="showDialog('#register','member');">Register</a>

<script type="text/javascript">
var ol;
var dialog=null;
function showDialog(panel,action){
      var each=each ? each : 0;
     function overlay(){
            if(panel){
                $("#dialog div.panel").hide();
                //show panel login,register,lostpw
                $(panel).show();
            }
            if(ol !== undefined && ol.isOpened()) {

                    $("#dialog").css("top", ( $(window).height() - $("#dialog").height() ) / 2+$(window).scrollTop() + "px"); 
                    $("#dialog").css("left", ( $(window).width() - $("#dialog").width() ) / 2+$(window).scrollLeft() + "px");
            }

            //Overlay load          
            ol=$("#dialog").overlay({top:'center', left:'center', closeOnClick:false, api:true }).load();

            $("#dialog .close").click(function(){
               ol.close();
            }); 
     }


    overlay();
    //cur action
    dialog=action;

return false;
}
</script>

Answer 1

I think I know what this bug is: http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.

The workarounds listed are:

Work arounds One may 'release the spell' in a number of ways:

1. temporarily switch the content's display property to 'block' and back to 'none'.
2. temporarily switch the content's position property from 'relative' to 'absolute' and back, or vice versa.
3. temporarily switch the content's visibility property to 'hidden' and back. (But this only works if the content is positioned absolutely! The wonderful world of IE...)

Go and have a look there for more information.

Answer 2

thanks ,Yi Jiang. the bug demo http://www.justarrangingbits.org/demo/2/

 //fix the bug
 if(panel){ 
           $("#dialog .panel").css({"display":"none","visibility":"hidden"});
           $(panel).css({"display":"block","visibility":"visible"});
 }