[jQuery] .animate in ie7 for absolutely positioned element pushes following elements down

[two7s_clash]

Hi -

I've got a little jquery bit to add some behavior to linked mp3s.

You see this here: http://www.reebee.net/bands/blue-suede-boppers/

Basically, jquery adds a speak icon and a player when the link is
clicked, and the link title flies off and fades to the right:

[code] jQuery('a[href$=mp3]:not(.amplink)')
                        .wrap('<div class="mp3_span">' + '</div>')
                                .addClass("mp3_title")
                        .attr("title", "Click to Play")
                        .before('<img src="' + anarchy_url + '/images/114.png"
title="Click to listen" class="speaker" style="margin:' + mp3imgmargin
+ '"/>')
                            .each(function awesome() {
                                          var $curr = jQuery(this);
                                          var $curr_img = $curr.prevAll('img');
                                        $curr_img.toggle (
                                  function () {
                                                $curr.animate({
                                                opacity: 0,
                                                left: "+=100px",
                                                        fontSize: "3em"
                                              }, 800, "linear", 
function(){$curr.hide();} );
                                        var my_url = $curr.attr("href");
                                        $curr_img.attr({
                                                src: 
anarchy_url+'/images/113.png'
                                        })
                                        .after ('<span><object 
style="'+mp3playerstyle+'" .... FLASH CRAP
HERE....</object></span>');
                                  },
                                  function () {
                                        $curr_img.attr({
                                                src: 
anarchy_url+'/images/114.png'
                                        })
                                        .nextAll('span').remove();
                                        $curr.show("slow")
                                        .animate({
                                        opacity: 100,
                                                left: "40",
                                        fontSize: "1em"
                                      }, 800, "linear");
                                  }
                                )
                                })
                                .click(function(event){
                                     event.preventDefault();
                                          var $curr = jQuery(this);
                                          var $curr_img = $curr.prevAll('img');
                                          $curr_img.trigger("click");
                                   });
        }
}[/code]

This works more or less how it would like it in all browsers except
ie7. There the block that is created for the expanding text pushes
everything down, even though the link are given a position:absolute
declaration. The pertinent css:
[code]
div.mp3_span {margin-left:90px; width:600px; position:relative;
display: inline !important; height:1.5em !important;}
a.mp3_title {font: oblique small-caps normal 1em/1.5em Arial, sans-
serif; display: inline !important; position: absolute !important;
cursor: pointer; width:500px; outline: none;}a.mp3_title:hover
{cursor: pointer; outline: none;}
a.mp3_title:active {outline: none;-moz-outline-style: none;}
img.speaker {border:none !important ;cursor:pointer; position:static !
important; vertical-align:top; }[/code]

I can't seem to do no matter what css I apply, and, of course, I'
rather not hack the jquery script.

So again - how can I keep the text animation without having the
follwing elements getting pushed down?

Thanks.