CODEWITHSUNDEEP
cssinternet-explorerfilteroverlayopacity
Martin
Martin

Reputation: 24318

CSS: Opacity - Div doesn't show in IE7?

I created a overlay which i am using to show while doing ajax requests. In firefox it works great! But in IE7 i don't see the Div.

my div is simple its the first element after Body

<div id="overlay">
   &nbsp;
</div>

and my css is here

#overlay {
z-index:1000;
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
background:#000;
opacity:0.45;
-moz-opacity:0.45;
filter:alpha(opacity=45);
display:none;
}

I think it maybe something to do with the sizing as i placed some text in the div and i don't see it on IE7 but i do on firefox.

Does anyon know where its not working, i am at a bit of a loss :-)

I tried removing display:none and its the same and i also inserting height:auto and still no joy.

I am using jquery to show and hide it liek so, but this isn't the problem as i removed Display:none and i don't see the div which should be over the top of the rest of the content

 $("#overlay").show();

Any ideas?

Thanks in advance

Upvotes: 1

Views: 971

Answers (2)

fcalderan
fcalderan

Reputation:

since your div is positioned in absolute you should specify an height (different than auto). This can be done declaring height:100% to #overlay , then also html, body { height: 100% } when you open the overlay and html, body { height: auto } when closing the overlay);

Another (better) way is to dinamically calculate the height of body elements via javascript (e.g. document.body.offsetHeight) and then assign to the #overlay as a height

document.getElementById('overlay').style.height = document.body.offsetHeight + 'px';

this would be written in you jQuery snippet as

$("#overlay").height($('body').height()).show();

Upvotes: 1

Damien
Damien

Reputation: 1217

Try the following additional CSS:

#overlay {
    zoom: 1;
}

Upvotes: 0

Related Questions