About Dan Wilson
Dan Wilson
Dan Wilson
Model-Glue:Gesture for Fun and Profit
Watch Video
Presentation Files
DataCurl LLC, My Company
2010 Speaking Engagements
Video Interviews
DZone Articles
Solution for JQuery Animation Content Bleeding Through
Posted By : Dan Wilson
December 18, 2007 3:42 PM
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:
2 <table>
3 <tr>
4 <td>Content la la la la la </td>
5 </tr>
6 </table>
7</div>
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
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.
Suscribe
Follow Us
Contact
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".