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!

score 0 · Answer 1 · answered Feb 18 '11 at 17:00

0

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

answered Feb 18 '11 at 17:00

Brandon

1,412
11
15

@Brandon : No luck with that, I tried it in every single div and still the same issue... IE is frustrating. Thanks for the advice though! – Albert R Feb 18 '11 at 17:26
@Albert - I took a look at the site and I'm not 100% sure what the issue is. The images never look full size in FireFox, but in IE go between fullsize and narrow. Is that what you mean? How about getting rid of the text-align center? – Brandon Feb 18 '11 at 18:56
@Brandon - Yeah I fixed the narrow images thing, I had changed it when messing with the CSS trying to fix this and never put it back. Now is fine, though. About the text-align, removing it it fixes the problem, but then I can't get the images to auto-center in the container. Thing is I will have images with different sizes and which I won't know in advance their actual size. I was trying to do that with javascript and the 'before' event in cycle (I've seen some examples around) but it never worked for me, so using the CSS way was my way to do it, until I found out about the IE issue... – Albert R Feb 18 '11 at 21:06
@Albert - It sounds like what you want to do is get rid of the text-align center and use margins to center the images, e.g. margin:0 auto;...what version of IE are you having the problem on? – Brandon Feb 18 '11 at 22:25
@Albert - You might have to make the image into a block: http://www.w3.org/Style/Examples/007/center.en.html – Brandon Feb 18 '11 at 22:49
@Brandon - Yeah I see that, but I'm trying with the margings and the pictures won't move, they're stuck to the left side of their container. I've tried using the margins in all the containers surrounding the images, just in case, but nothing, following what says in your example (thanks for it). IE 8 is the one giving me a headche... – Albert R Feb 19 '11 at 00:03
@Brandon - UPDATE: I managed to finally center the images using the example you gave me (margins to auto) BUT the IE problem is back when doing it, and I don't have any text-align in the code. So I figure that the problem must come from somewhere else... – Albert R Feb 19 '11 at 00:23
I finally solved te problem centering the images via JavaScript instead of CSS. I followed the method described in this post: http://stackoverflow.com/questions/1719475/jquery-cycle-firefox-squishing-images . Thank you very much for your help anyways! – Albert R Feb 20 '11 at 06:48

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

1 Answers1