Question

I have two divs, both with position:absolute;, one inside the other. The parent isn’t in a place where it can be set as position:relative without an extra layer of complexity (there are a lot of other elements around it that I’d have to account for to put it where it needs to be, which is at the very top of the page, over everything). The child element is made to stick off the bottom of the parent.

In Chrome, Safari, Firefox, it all works splendidly.

In IE, it works until jQuery moves the parent element – at which point the parent element clips the child, so you can barely see the top of the child. I feel like I’ve read about this, about IE clipping child elements, but I can’t seem to find an answer that applies to my case.

It’s pretty simple, basically:

<div id="parent" style="position:absolute;top:0;left:0;">
    [content]
    <div id="tab" style="position:absolute;bottom:-30px;left:0;width:64px;height:32px;background-image:(...);"></div>
</div>
<script>
$(document).ready( function() {
    $("#tab").click(function() {
            $("#parent").animate({"top":"-50px"},300);
        });
});
</script>

Answer 1

If you explicitly set the height of the parent element you shouldn’t have issues anymore. If you don’t know at render time what the height should be (IE it’s dynamic content), something like this should work:

$('#parent').height(function() { 
   var parentHeight = 0;
   $('#parent').children().each(function() { 
       parentHeight += $(this).height();
   });
   return parentHeight;
});