While this code functions well in Firefox, it unfortunately does not work in IE.
I am seeking a solution to properly center the div on the screen - Currently, the div is leaning too much towards the bottom
In addition, I require the div with an id of "loading" to cover the entire window and prevent clicks elsewhere.
This solution must be IE-compatible.
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-latest.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;
}
Sample file