IE: center and overlay a div
Help PLEASE!!!
I am going crazy with IE!!!

The following code works so so in Firefox, but NOT in IE. 

I need to properly center the div on the screen -Right now the div is leaning too much to the bottom

I also need to make this div (id="loading") to cover the whole window -And take all the clicks to prevent clicks somewhere else.

It need to be compatible with IE plz!

HTML

    <html>
    <head>
    <title>Overlay</title>
    	<link href="loading.css" rel="stylesheet" type="text/css" />
    	
    	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    	<script type="text/javascript" src="loading.js"></script>
    </head>
    <body>
    This paragraph is for testing
    <br/>
    Hello world!
    <br/>
    How are you?
    <br/>
    Be happy!
    <br/>
    <input id="cmd" type="button" value="Test" />
    </body>
    </html>

CSS

    #loading {
        background-color: black;
        background-color: rgba(1, 1, 1, 0.7);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    
    #loading_box {
        width: 150px;
        height: 35px;
        border: 5px solid #FFFFFF;
        padding: 5px;
    
        text-align: center;
        margin-top: 50%;
        margin-left: 50%;
        position: relative;
        top: -15.5px
    }
    
    #loading_img {
        width: 31px;
        height: 31px;
    }
    
    #loading_txt {
        color: #49a0dc;
        font-weight: bold;
        margin-left: 0.5em;
        font-family: "Arial Black", Gadget, sans-serif;
    }


JS

    $(document).ready(function() {
        var loading = $('<div id="loading"></div>');
        loading.html('<div id="loading_box"><img id="loading_img" src="http://www.fchdata.com/img/loading/loading.gif" /><span id="loading_txt">Loading...</span></div></div>');
    
        //FOR TESTING         
        //alert(  loading.text() ); //FOR TESTING ONLY!!!
        $("#cmd").click(function() {
            loading.appendTo('body');
    
            var event = $(document).click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.stopImmediatePropagation();
            });
    
            // disable right  click
            $(document).bind('contextmenu', function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.stopImmediatePropagation();
            });
        });
    });

Sample file
[http://punkbunny.com/tmp/overlay/overlay.html][1]


  [1]: http://punkbunny.com/tmp/overlay/overlay.html
IE: center and overlay a div
===

Help PLEASE!!!
I am going crazy with IE!!!

The following code works so so in Firefox, but NOT in IE. 

I need to properly center the div on the screen -Right now the div is leaning too much to the bottom

I also need to make this div (id="loading") to cover the whole window -And take all the clicks to prevent clicks somewhere else.

It need to be compatible with IE plz!

HTML

    <html>
    <head>
    <title>Overlay</title>
    	<link href="loading.css" rel="stylesheet" type="text/css" />
    	
    	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    	<script type="text/javascript" src="loading.js"></script>
    </head>
    <body>
    This paragraph is for testing
    <br/>
    Hello world!
    <br/>
    How are you?
    <br/>
    Be happy!
    <br/>
    <input id="cmd" type="button" value="Test" />
    </body>
    </html>

CSS

    #loading {
        background-color: black;
        background-color: rgba(1, 1, 1, 0.7);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
    }
    
    #loading_box {
        width: 150px;
        height: 35px;
        border: 5px solid #FFFFFF;
        padding: 5px;
    
        text-align: center;
        margin-top: 50%;
        margin-left: 50%;
        position: relative;
        top: -15.5px
    }
    
    #loading_img {
        width: 31px;
        height: 31px;
    }
    
    #loading_txt {
        color: #49a0dc;
        font-weight: bold;
        margin-left: 0.5em;
        font-family: "Arial Black", Gadget, sans-serif;
    }


JS

    $(document).ready(function() {
        var loading = $('<div id="loading"></div>');
        loading.html('<div id="loading_box"><img id="loading_img" src="http://www.fchdata.com/img/loading/loading.gif" /><span id="loading_txt">Loading...</span></div></div>');
    
        //FOR TESTING         
        //alert(  loading.text() ); //FOR TESTING ONLY!!!
        $("#cmd").click(function() {
            loading.appendTo('body');
    
            var event = $(document).click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.stopImmediatePropagation();
            });
    
            // disable right  click
            $(document).bind('contextmenu', function(e) {
                e.stopPropagation();
                e.preventDefault();
                e.stopImmediatePropagation();
            });
        });
    });

Sample file
[http://punkbunny.com/tmp/overlay/overlay.html][1]


  [1]: http://punkbunny.com/tmp/overlay/overlay.html