JQuery IE <div> opacity problem

Question

I have a problem with IE. I have a layer that has this style to make it transparent and fullscreen.

position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #000000;
filter:alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;
z-index: 1;

And i use the JQuery method fadeIn and fadeOut to show and hide it. Well all well in Opera locks great but IE7 Just overides the style and sets it to 100% opacity. it dosent even fade!!

Solution

Peter-Paul Koch has a fantastic article on opacity. In general, quirksmode.org is the first place I go to solve browser-compatibility issues; PPK's done a great deal of research. That said, you look like you have all the right styles in place - is jquery's fadein implementation not doing the right thing, even when you give it a target opacity?

Could you solve the problem by setting the declared CSS to fully-opaque but visible:false, and then use fadeto to get to the target opacity?

Comments

[Evan Meagher]

I'd go with this solution. IE's support for opacity is abysmal, so you'd be better off initializing the div with visibility: hidden; or display: none; and then making it visible and fade when it's activated. This way, the fade effect will work where it's supported, and fall back on simply displaying the div where it isn't.

[Raven]

How do i give jquery's fadein a target opacity?

[Dan Davies Brackett]

answer edited: sorry, I should have referenced fadeto and not fadein.