CODEWITHSUNDEEP
cssinternet-explorer-7overlay
Martijn
Martijn

Reputation: 24799

CSS IE7 slow overlay

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>

Upvotes: 0

Views: 3696

Answers (4)

SigmaBetaTooth
SigmaBetaTooth

Reputation: 2084

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/

Upvotes: 0

Hirad
Hirad

Reputation: 21

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.

Upvotes: 2

Sergei
Sergei

Reputation: 2757

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.

Upvotes: 0

ChadT
ChadT

Reputation: 7713

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

Upvotes: 2

Related Questions