CSS Transparency

Hi,

I am trying to create a page loading screen using CSS and Javascript as given in the website – [url]http://andrewpeace.com/javascript-css-load-screen-full-screen.html[/url] This works correctly when run on the website itself.

When I use this code on my website, I am able to get the loading gif successfully but the background transparency is not coming. I have compared the code and it is by the line.

Can someone please help?

The code I’ve used is

CSS:

[CODE]<style type=”text/css”>
/*this must be set so that the loading div
can be height:100% */
body{height:100%}

/*this is what we want the div to look like
when it is not showing*/
div.loading-invisible{
/*make invisible*/
display:none;
}

/*this is what we want the div to look like
when it IS showing*/
div.loading-visible{
/*make visible*/
display:block;

/*position it at the very top-left corner*/
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;

/*in supporting browsers, make it
a little transparent*/
background:#fff;
_background:none; /*this line removes the background in IE*/
opacity:.75;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;

/*set the padding, so that the content
of the div is centered vertically*/
padding-top:25%;
}
</style>[/CODE]

HTML:

[code=html]<div id=”loading” class=”loading-invisible”>
<p><img src=”images/lightbox-ico-loading.gif”></p>
</div>[/code]

Javascript:

[CODE]<script type=”text/javascript”>
document.getElementById(“loading”).className = “loading-visible”;
var hideDiv = function(){document.getElementById(“loading”).className = “loading-invisible”;};
var oldLoad = window.onload;
var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
window.onload = newLoad;
</script>[/CODE]

Thanks for you help!

Also in #CSS _↴