Jquery.Cycle and IE7 including next Div

Question

Hi All,

I'd really appreciate if someone could help me with a strange problem with Jquery.cycle.

I've added jQuery.cycle (version 2.72) into a existing application (Prestashop) to slideshow a number of images. On Firefox, Mozilla etc it works brilliantly - on IE7 a bizarre problem occurs.

The problem is where I have a <div class="pics" id="pics"> and say 6 pictures </div> a couple of <div><br></div> to break things up then another <div id="editorial> content </div> and IE includes the "editorial" into the slideshow. The "editorial" block is removed from the page, and appears as the last slide in the slideshow, located in the top left corner.

Additional facts: jquery-1.2.6 is in use for the rest of the application (I've tried to upgrade it and all I get is the same behaviour with lots of other things breaking). I've tried jquery.cycle.lite - same behaviour.

css:
root { 
    display: block;
}

.pics {
    height:  432px;
    width:   432px;
    padding: 0;
    margin:  0;
}

.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  400px;
    height: 400px;
    top:  0;
    left: 0
}
div.pics {
    margin-left: auto;
    margin-right: auto;
}

snippet:
<script type="text/javascript" src="caro/assets/jquery.cycle.all.2.72.js"></script>
<!--
  orenCaro core stylesheet
-->
<link rel="stylesheet" type="text/css" href="caro/assets/caro.css" />
<script type="text/javascript">

$(document).ready(function() {
    $('.pics').cycle({
        fx: 'fade',
        pause: 100,
 cleartype: 1
    });
});

</script>


<div class="pics" id="pics">
img source
img source
img source
img source
</div>
<div> <br></br></div>

<!-- /MODULE caro -->
<!-- Module Editorial -->
<div id="editorial_block_center" class="editorial_block">

Answer 1

Thanks all, It appeared that IE7 doesn't like the way jquery.cycle renders \<\img src />. So don't add any parameters to the \<\img src>.

Thanks all.