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

Question

My problem is easier to see than to explain:

You can see that during the transition, there's a small movement of the pictures, which looks bad. In Firefox this doen't happen.

Here's the HTML code (there's some php for CakePHP, whichs writes with the specified parameters, but even using regular HTML instead the problem remains the same):

-- Before reading the code, to save you some time, you might want to read below my explanations of what I've figured out that's causing this 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 the CSS:

#home_title {
padding-top:10px;
width:100%;
text-align:center;
}

#slideshow_container {
width:1000px;
text-align:center;
}

#slideshow_frame {
overflow: scroll; /* Allows the slides to be 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 a img{
margin:auto;
display:block;
}

So after trying to modify the CSS, adding new divs, removing divs, and many other things, I've figured out that if I remove all the lines from the code except one, then the problem is gone. And for example, if I have only the line and just one line, depending on the height of the "home_title" div, the problem appears or disappears. For example, if I add a padding-top and a padding-bottom of 20px, everything is fine, no transition problem. But if I add 30px instead of 20px, the problem is there.

So, how is it possible that the height of the div above changes the behavior of the transition? I've tried adding an empty div in-between, but doesn't solve the problem. It's like the problem comes from the distance from the sildeshow to the top. Also, if I use "position:absolute" in the "home_slideshow" to positionate it manually, then the problem is also gone. But I loose flexibility in my layout that I will need later.

Any ideas of what can be happening here? Thank you very much in advance!

Answer 1

I had a similar issue. Try setting the vertical-align property of your parent div to bottom.