Setting Opacity

[Frinavale]

So, the opacity style is rather annoying because every browser seems to handle it differently. I guess it's because opacity wasn't included in the w3c standards to begin with...mind you if it had been included from the get-go, I have my doubts on whether this would have changed anything that we have to deal with today.

Anyways, enough ranting....I'm attempting to place a <div> over top of my content while an asynchronous call to the server is taking place. This is done to prevent the user from submitting any additional data to the server during "special" processes...

I'd like to set the opacity of this <div> to about 50% so that it looks all "pretty" and the user knows that they aren't able to access any of the content in the area behind the <div>.

Some strange stuff is happening in IE7 and 8.
The <div> is appearing over top of the content correctly....but the opacity settings are very strange. It starts at about 50% at the middle of the <div> but as it spreads outwards it fades to 0%. It's kind of neat (a half faded circle in the center that fades to nothing)...but it's not what I want.

What am I doing wrong here?

How do I change this so that the entire <div> is faded to 50% instead of just a circle in the middle of my <div>?

function Processing() {
    //shield is the <div> that is used  to cover the content and already has the the position style set to absolute.
    var shield = document.getElementById('ctl00_CPH_MainContent_myControl_shield');
    shield.style.display = 'block';
 
    //I had attempted setting the CSS Class for the div that would have set
    //opacity of it, but this isn't working well with the asynchronous stuff in IE
    //so I decided to set each individual style in JavaScript instead
    //shield.className = 'modalBackground';
 
    shield.style.backgroundColor='white';
    shield.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50, FinishOpacity=0, Style=2)';
    shield.style.opacity='.5';
}

The following works but I'm don't think it will work in IE6:

function Processing() {    
    var shield = document.getElementById('ctl00_CPH_MainContent_myControl_shield');
    shield.style.display = 'block';   
    //shield.className = 'modalBackground';   
    shield.style.backgroundColor='white';     
    shield.style.filter = 'alpha(opacity=50)';    
    shield.style.opacity='.5'; 
}

Thanks for your time,

-Frinny

[acoder]

The element needs to "have layout" in IE for it to work. See here for more on the hasLayout property.

[Frinavale]

An interesting read.

My initial thought on the topic is: "Got Layout?"

That article actually answered a long forgotten question regarding determining the height and width (clientWidth/clientHeight) of an element in order to center it via JavaScript...I just gave up on the problem and worked around it but I think I'll revisit that code and make appropriate changes to it...thanks.

But, this article didn't help me in figure my Opacity issue.
My element has it's height and width set, it hasLayout, and the opacity is "sort of" working...

Maybe I'll just give up on the IE6 compatibility. It's almost 2 versions ago...and is so much more work! Sometimes IE really gets on my nerves....but no where near as much as Opera.

-Frinny

[acoder]

Have you got a standalone version of IE6? If so, filters may not work.