Why does my DIV clip its child DIV when jQuery moves it in IE?
- by Ben Saufley
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>
