children disappear with fadeTo / opacity effects

children disappear with fadeTo / opacity effects

I have this html:

<div class="foo parent">
  <div class="child"></div>
</div>


with some css:

    .foo{
         position:absolute;
         left: -117px;
         background:#000000 none repeat scroll 0 0;
         color:#FFFFFF;
         z-index:8;
     }
    .parent{
         top:23px;
         width:100px;
         height:30px;
     }
    .child{
         position:relative;
         left:94px;
         top:5px;
         height:20px;
         width: 110px;
         background:#000000;
         z-index:9;
    }


I want this parent and child to change to a transparent effect together, animated or not (preferably animated) and end up with opacity:0.50. Firefox does this just fine, but IE gives trouble: When I do a fadeTo() or just even simply apply .css('opacity','0.50') on the parent, the parent has the appropriate opacity and the child just disappears.

Any opacity effect I use, e.g.,

$('.parent').fadeTo('fast',0.50)
$('.parent').css('opacity','0.55')

...works fine on the parent but the child disappears.

Including both the parent and the child in the selector also give the same problem:

$(".parent, .child").fadeTo('fast',0.50)

...does the same thing. It think someone must have run into this before. What am I missing, how is this done?