.animate in ie7 for absolutely positioned element

.animate in ie7 for absolutely positioned element

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:

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");
               });
   }
}


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:
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; }


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.