Check out this simple example: http://jsfiddle.net/CnUkA/5/
I am facing an issue with the slideDown animation applied to my outer div. Inside this div, there is an inner div with position:relative.
In IE7, the inner div displays immediately when clicking the button. However, in my actual project, I need that div to be relative so I can position its children inside it using absolute positioning.
--- EDIT ---
Applying position:absolute to #slide is not suitable for my situation.
I will have elements positioned absolutely relative to the #inner div, so removing position:relative from it is not an option either.
Here's an updated example demonstrating why I require position:relative on #inner. http://jsfiddle.net/CnUkA/9/
Both the relative and absolute elements appear before the slide animation completes in IE7
--- EDIT 2 ---
Based on the suggestions below, I believe I found a decent solution:
Add position:relative to the sliding-down div, then set position:static after the animation finishes. This prevents the element from disappearing.