IE problem with jQuery Cycle: slight displacement in pictures during transition -

my problem easier see explain:

you can see during transition, there's small movement of pictures, looks bad. in firefox doen't happen.

here's html code (there's php cakephp, whichs writes specified parameters, using regular html instead problem remains same):

-- before reading code, save time, might want read below explanations of i've figured out that's causing problem --

<div id="home_title"> <h1>title</h1> <h3>text line</h3> <h3>text line</h3>   <h3>text line</h3> <h3>text line</h3>   <h3>text line</h3>   <h3>text line</h3>           </div>  <div id="home_slideshow"> <div id="slideshow_container">     <div id="slideshow_frame">          <div id="slides_home">             <div class="slide"><?php echo $this->html->image('/gallery_pics/00294.jpg', array('alt' => '00294'))?></div>             <div class="slide"><?php echo $this->html->image('/gallery_pics/00314.jpg', array('alt' => '00314'))?></div>             <div class="slide"><?php echo $this->html->image('/gallery_pics/00523.jpg', array('alt' => '00523'))?></div>             <div class="slide"><?php echo $this->html->image('/gallery_pics/00786.jpg', array('alt' => '00786'))?></div>         </div>     </div> </div> </div>  <div id="home_menu"> <a href="#">introduction</a> ---- <a href="#">just enter</a>   </div> 

here's css:

#home_title { padding-top:10px; width:100%; text-align:center; }  #slideshow_container { width:1000px; text-align:center; }  #slideshow_frame { overflow: scroll; /* allows slides viewed using scrollbar if javascript isn't available */ }  #slides_home { margin:auto; width:900px; height:611px; border-style:solid; border-width:1px; border-color:#0f0; }  #slides_home div { width:900px; border-style:solid; border-width:1px; border-color:#f30;  }  #slides_home div img{ margin:auto; display:block; } 

so after trying modify css, adding new divs, removing divs, , many other things, i've figured out if remove lines code except one, problem gone. , example, if have line , 1 line, depending on height of "home_title" div, problem appears or disappears. example, if add padding-top , padding-bottom of 20px, fine, no transition problem. if add 30px instead of 20px, problem there.

so, how possible height of div above changes behavior of transition? i've tried adding empty div in-between, doesn't solve problem. it's problem comes distance sildeshow top. also, if use "position:absolute" in "home_slideshow" positionate manually, problem gone. loose flexibility in layout need later.

any ideas of can happening here? thank in advance!

i had similar issue. try setting vertical-align property of parent div bottom.