Child elements in div won't fadeTo() in IE

Question

This is strange to me. This code:

$(".layover").fadeTo("fast", 0.0);
$(".layover").hover(function() {
$(this).fadeTo("fast", 0.9);
},
function() {
$(this).fadeTo("fast", 0.0);
});

..works just fine on all browsers except IE7 and IE8. It even works (slowly) in IE6 (screams!) In IE7 and IE8 this code will NOT fade out child elements namely img tags. The img just sit there unaffected. However, if I enable "compatibility mode" in IE8, it works as expected. See this example page.

Is there a bit I'm missing in my JavaScript to help IE play nice? Can I force compatibility mode in IE?

And I know someone is going to comment on the FOUC. I'm working on that too.

UPDATE: Here's the CSS portion

div.layover {
position:absolute;
padding:0px;
display:inline-block;
background-color:#fff;
height:106px;
width:312px;
}

Answer 1

This doesn't answer your main question, but I believe changing your first line to this would help fix your FOUC:

$(".layover").hide();