how to fix shifting after animation in IE

Question

Hi,

I just made a text animation (fade in; animate(top, opacity)) and at the end, the text went about 5px left then returned to its original position, quite quickly. This happened in IE only; all other major browsers behaved normally.

Any idea about why it happens, and how to fix it? I am interested in fixing IE7 in particular.

Thanks.

(PS, I removed the filter attribute in order to avoid ClearType glitch.)

HTML

<div id="logomarca">
    <h1 id="marca">txt</h1>
    <p id="spec">txt</p>
</div>

CSS

div#logomarca{     
position:absolute;
left:50%;
top:0%;
margin-top:-83px;
margin-left:-83px;
width:160px;
height:45px;
    }
p#spec{position:absolute; }

Javascript

    $(document).ready(function(){
    $("div#logomarca").show();
    $("p#spec").fadeTo(0, 0.00,
     function() { if($.browser.msie) { this.style.removeAttribute('filter'); }; } 
    ); //hide() is not working with fadeIn
    if($.browser.msie) { 
       $("p#spec").css({ 
       "margin-top": "8px",  
       "margin-left": "-165px", 
       display: "none"  
       }); 
      }; 
    $("div#logomarca").animate({
     top: "+=50%",
     opacity: 1.00
     }, 2500, 
     function() { if($.browser.msie) { this.style.removeAttribute('filter'); }; } 
     );
    $(this).delay(3200,function(){  
     if($.browser.msie) { $("p#spec").show(); };
$("p#spec").fadeTo(0, 0.00  ); 
     $("p#spec").animate({
      opacity: 1.00,
      top: "+=20"  
      }, 2500,
      function() { if($.browser.msie) { 
       this.style.removeAttribute('filter'); 
       }; }    
      );
     $(this).delay(3500,function(){  
      $("p#spec").fadeTo(800, 0.0);
      $(this).delay(650,function(){  
       $("h1#marca").fadeTo(1500, 0.0);
       });
      });
     });
 });

Answer 1

Try wrapping in a div with fixed dimensions.

Answer 2

It would help if you could post a minimized working sample so we can look at the code.

My best guess is that you need to wrap your element with a block-level element (div or p) and give that element 'position: relative;' for IE to behave.

Answer 3

Change the margin to padding and see if that helps. I had a really similar problem recently and that solved it.