CSS Transparency

[Eightytwo]

Hi,

I am trying to create a page loading screen using CSS and Javascript as given in the website - http://andrewpeace.com/javascript-cs...ll-screen.html 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:

<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>

HTML:

<div id="loading" class="loading-invisible">
<p><img src="images/lightbox-ico-loading.gif"></p>
</div>

Javascript:

<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>

Thanks for you help!

[beau kang]

Background transparencies are a pain in the butt because each browser is different in handling them (and IE is the worst). A work around would be do bring in a semi-transparent background made in photoshop as a .png. Only problem with that is IE6 doesn't handle PNG's well, and you would need to get some special program to handle that too.

You can look at how to handle this with http://www.w3schools.com/css3/css3_pr_opacity.asp and make sure to look at the section just below what browsers support it.

What browser are you using anyway?

[Eightytwo]

Hi! Thank you for replying...

I am aware that each browser handles transparency differently and that IE is the worst... I request all IE users to FF or Chrome because a two key design elements on my site don't work on IE and I don't want to change that.

The reason I posted this is because the transparency works perfectly in the website's demo that I linked to. When I tried implementing the same thing on my site, it didn't work... only the loading image came up. The photos in background can still be seen loading...

And what's even worse is that I later tried changing the colour of the transparency to black. The black layer came but the photos load on TOP of the layer and not BELOW it!

I use Chrome and test on FF...