Solution for JQuery Animation Content Bleeding Through

Here is a quick tip for those using animations with the JQuery library.

I just tracked down a weird issue with a JQuery Animation. The functionality of the page was very similar to an Accordion. Click an image, the content collapses using the slideDown() function. Click again, the content expands using slideUp(). The structure of the content was a table wrapped inside a container DIV:

view plain print about
1<div class="SectionContainer">
2 <table>
3 <tr>
4 <td>Content la la la la la </td>
5 </tr>
6 </table>

Not rocket science, right? This effect rendered flawlessly in Firefox shrinking and hiding the content incrementally. In I.E. 6, even though the containing div shrank incrementally, the content was visible up until the end of the animation, ruining the effect.

Through Divide and Conquer, I discovered the table had a css rule "position:relative". Removing this rule made the animation behave without bleeding through.

There are no comments for this entry.

Add Comment Subscribe to Comments

12/19/07 2:02 PM # Posted By Chris Phillips

I've had so many issues with this type of stuff when position: is used. I'm starting to really hate position:.

If you are writing static HTML pages that you want pixel perfect control over some fancy layout, then fine use position:.

I think though, that when it comes to dynamic pages that have to be flexible enough to accommodate varying content, float: seems to often work better. I think the yahoo box css stuff is based on float:.

Just so people know, setting something position:relative; is not the same as just leaving it alone in all browsers. So, position; if you have to. But, realize that it takes the element out of the normal "page flow".

10/5/09 8:04 AM # Posted By MitchellT

Thanks for this post! This helped me fix a big problem with my layout, but I'm still having the same trouble with IE7. Firefox is OK at least.