jQuery Cycle in an horizontal scrollable div: IE problem
<p>I've a problem in IE 6 and 7 with a Cycle slideshow embed in a horizontal scrollable div. I've used this technique ( <a href="http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div" rel="nofollow">http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div</a> ) to create the horizontal scrollable div. I would embed the Cycle slideshow in the scrollable div. All work normally in FF3, Opera, Chrome. In IE 6 and 7 the container of the images and the nav thumbnails are fixed, they don't scroll. Every other div or element in the scrollable div work fine.</p>

<p>This is my code:</p>

<pre><code>&lt;div id="content"&gt;
  &lt;div id="contentscroll"&gt;
    &lt;div id="contentholder"&gt;

      &lt;div class="contentitem"&gt;
        &lt;span class="name"&gt;ABC&lt;/span&gt;
        &lt;span class="price"&gt;25 €&lt;/span&gt;
    &lt;div class="photo"&gt;
          &lt;img src="642_03_prod[1].png" height="280" width="280" /&gt;
          &lt;img src="855_02_prod[1].png" height="280" width="280" /&gt;
          &lt;img src="856_01_prod[1].png" height="280" width="280" /&gt;
        &lt;/div&gt;
        &lt;ul class="colors"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="642_03_prod[1].png" height="25" width="25" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="855_02_prod[1].png" height="25" width="25" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img src="856_01_prod[1].png" height="25" width="25" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;

      &lt;!--- other contentitem ---&gt;

    &lt;/div&gt; &lt;!--- end contentholder ---&gt;
  &lt;/div&gt; &lt;!--- end contentscroll ---&gt;
&lt;/div&gt; &lt;!--- end content ---&gt;
</code></pre>

<p>This is the CSS:</p>

<pre><code>#contentscroll {
    background: transparent;
    width: 990px;
    height: 386px;
    overflow: hidden;
}

#contentholder {
  width: 1500px;
  height: 386px;
}

.contentitem {
  width: 330px;
  height: 100%;
  padding: 0;
  float: left;
}

.contentitem .name, .contentitem .price {
  width: 330px;
  height: 18px;
  margin:0;
  padding: 0;
  float: left;
  text-align:center;
  font:12px Arial, Helvetica, sans-serif;
  color: #FFF;
}

.photo{
    height: 280px;
}

ul.colors { margin:0; padding:0; height: 18px;}
ul.colors { list-style-type: none; display: inline; margin:0; padding:0; }
ul.colors li { background: none; display: inline; margin: 0; padding: 0; }
ul.colors li a { background: none; border: 0; margin: 0; margin-right: 2px; padding:0; color: #FFF;}
ul.colors li a img { background: none; border: 0; margin: 0; padding:0; }
</code></pre>

<p>This is the JS:</p>

<pre><code>$('.photo').cycle({ 
 fx:     'turnDown', 
 speed:  'fast', 
 timeout: 0, 
 pager:  '.colors',
    fastOnEvent: true,
 slideExpr:     null,
 cleartype:  true,
    cleartypeNoBg:  true,
 pagerAnchorBuilder: function(idx, slide) { 
  // return selector string for existing anchor 
  return '.colors li:eq(' + idx + ') a'; 
} 
});
</code></pre>

<p>Can anyone help me? Does Cycle apply CSS proprety to .photo and .colors and this fact create this issue? .name span e .price span scroll.</p>
