css - Why does my DIV clip its child DIV when jQuery moves it in IE? -
i have 2 divs, both position:absolute;
, 1 inside other. parent isn't in place can set position:relative
without layer of complexity (there lot of other elements around i'd have account put needs be, @ top of page, on everything). child element made stick off bottom of parent.
in chrome, safari, firefox, works splendidly.
in ie, works until jquery moves parent element - @ point parent element clips child, can barely see top of child. feel i've read this, ie clipping child elements, can't seem find answer applies 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>
if explicitly set height of parent
element shouldn't have issues anymore. if don't know @ render time height should (ie it's dynamic content), should work:
$('#parent').height(function() { var parentheight = 0; $('#parent').children().each(function() { parentheight += $(this).height(); }); return parentheight; });
Comments
Post a Comment