IE7 bug with CSS3Pie and jQuery animations

Question

Hello everyone I hope someone can help me with this matter.

I'm using CSS3Pie to get rounded corners on a box at and everything works fine in all browsers including IE7. But when you add animations (this time slideToggle) to an element inside my box IE7 start acting like it does when you didn't but position:relative. The element gets huge, 5000px x 10000px +++. I'm sure about that all the element has position:relativewhen they need to.

I have seen this bug before and we found a workaround that included some JS fixes for the CSS3Pie file before but I can't find it again.

I'm thankful for all help that I can get.

Thanks Jimmie

You cans see on the image below that the gray background doesn't end where the box end it's just continues out over the other elements on the site.

This is the css for the element that slides down

#grades .form-content {
    margin:0 10px;
    padding:10px;
    width:93.8%;
    background:#fff;
}

This is the css for the box:

.m-pc {position:relative;}

.m-pc .m-c {
    position:relative;
    padding:38px 21px 10px;
    margin-bottom:25px;
    border:1px solid #cbcbcb;
    border-top:none;
    -moz-box-shadow:0 1px 5px #e3e4e3; /* FF3.5+ */
    -webkit-box-shadow:0 1px 5px #e3e4e3; /* Saf3.0+, Chrome */
    box-shadow:0 1px 5px #e3e4e3; /* Opera 10.5, IE 9.0 */
    background:#f6f6f6;
    behavior:url(/css/vendor/pie.htc);
}

.m-pc .m-h {
    position:relative;
    border:1px solid #cbcbcb;
    -webkit-border-radius:6px 6px 0 0;
    -moz-border-radius:6px 6px 0 0;
    border-radius:6px 6px 0 0;
    background:#eee;
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#eee), to(#e5e5e5));
    background:-webkit-linear-gradient(#eee, #e5e5e5);
    background:-moz-linear-gradient(#eee, #e5e5e5);
    background:-ms-linear-gradient(#eee, #e5e5e5);
    background:-o-linear-gradient(#eee, #e5e5e5);
    background:linear-gradient(#eee, #e5e5e5);
    -pie-background:linear-gradient(#eee, #e5e5e5);
    behavior:url(/css/vendor/pie.htc);
}

Answer 1

It might be a double margin issue when the animation starts, can you post the animations style?

#grades .form-content {
    margin:0 10px;
    *margin:0 5px;
    *zoom:1;
    padding:10px;
    *padding:5px;
    width:93.8%;
    background:#fff;
}

The problem Seems to be coming from the animation style itself, or are you just using slideToggle?

.animate({
    'left/right/top/bottom' : ?
});

Answer 2

I cant find the post now but help from another poster fixed a similar issue for me. Add a callback to your animation to recalculate position:

 $('.your_div').animate(function () {
            if ($.browser.msie) {
                $(this).each(function () { $(this).resize(); });
            }
        });