PDA

View Full Version : Getting expanding div to overlap its parent in IE



htcilt
Feb 19th, 2010, 04:48 PM
I'm using this expanding/collapsing div:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

This sits in a container div.
The content of the containing div is wider the that of its parent. So when the div is expanded, the width of the parent is stretched also. This only happens in IE.
Firefox does the same thing until I add display:block. After this the div overlaps its parent nicely and no widths are adjusted.

How can I overcome this in IE? I've tried setting the parent div's z-index to 1 and the child expanding div to z-index 2, but the same thing happens :(

htcilt
Feb 20th, 2010, 12:14 PM
This only appears to be a problem in IE6

I've attached a demo to show the problem. I'd be grateful if someone could have a look at it in IE6 - you can download this fantastic tool to test in any version of IE
http://www.my-debugbar.com/wiki/IETester/HomePage

htcilt
Feb 20th, 2010, 12:57 PM
Think I've got it working:


<style>
#jason_container {
border: 1px solid #000000; width: 250px; overflow:hidden;z-index:1
}
#jason {
width: 300px; background: #FFFFCC; display:none; border: 1px solid #000000;position:relative;z-index:2;
}
html>body #jason_container {
overflow: visible;
}
</style>