CSS IE7 slow overlay

Question

When i press a button an overlay appears. In Firefox the overlay is fast, nothing special. But in IE7 the overlay is very slow. I was wonder why?

Here is my CSS:

.DocOverlayShow
{
 background: url("/Graphics/overlay bg.png");
 top:0px; 
 left:0px; 
 width:100%; 
 position:fixed; 
 padding:10px; 
}
.DocAddCommentBox
{
 color: #000;
 margin:0 auto;
 margin-top: 200px;
 width: 650px;
}

The overlay is activated when i click a button. Everything in IE works fine, but the overlay is soooo slow. Any ideas how come?

EDIT: When i use Opacity and filter, everything on this div is also transparant. This i don't want. On the overlay div i have another div (DocAddCommentBox). This div may not have transparancy. How can i solve this?

EDIT: Solution:

.DocOverlayShow
{
 background-color: #0057C3;
 Opacity:0.5;
 filter: alpha(opacity=50); /*IE*/
 top:0px; 
 left:0px; 
 width:100%; 
 height: 100px;
 position:fixed; 
 padding:10px; 
 z-index: 1000;
}
.DocAddCommentBox
{
 background-color: #DBDBDB;
 color: #000;
 position: fixed;
 margin:0 auto;
 margin-top: 150px;
 width: 450px;
 z-index:2000;
}

And in html i've used:

<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>

Answer 1

Does your overlay.png have an alpha channel/transparency? If so, try it without the transparency. From memory, IE is horribly slow at rendering such things.

What I would do is use CSS for transparency.

Set opacity like so:

Opacity:0.5;

Unfortunately it's not supported in IE, so we also have to use a custom IE attribute:

filter: alpha(opacity=50);

Answer 2

here' s the CSS of overlay that I used in my project:

#siteol {
  position: absolute;
  z-index:10000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
}

<!--[if IE]>
/* style for IE */
<style type="text/css">
#siteol  {
  filter: alpha(opacity=70);
}
</style>
<![endif]-->

just get rid of the PNG.

Answer 3

you don't need the opacity syntax, all you need to do is to make your transparent images bigger than 1px or 2px, minimum 20px will work. Mainly, images with background-repeat and specially the ones that have many repeats to fill the empty space they make your IE7 much slower than the others.