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

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.

Answer 3

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 4

I had the exact same problem and the following solution worked perfectly without playing with the additional opacity attribute. It still requires IE to use filter but feels cleaner to me.

background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');

A great explanation for the IE filter gradient trick and benefits of not using opacity attribute on backgrounds can be found below

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/