jQuery Zyklus in einem horizontalen scrollbaren div: IE Problem

Question

Ich habe ein Problem in IE 6 und 7 mit einer Zyklus-Diashow in einem horizontalen scrollbaren div eingebettet. Ich habe diese Technik (http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div) verwendet, um das horizontale scrollbare div zu erstellen. Ich würde die Cycle-Diashow in das scrollbare div einbetten. Alle arbeiten normalerweise in FF3, Opera, Chrome. In IE 6 und 7 sind die Container der Bilder und die Nav-Thumbnails fixiert, sie scrollen nicht. Jedes andere div oder Element im scrollbaren div funktioniert gut.

Dies ist mein Code:

<div id="content"> 
    <div id="contentscroll"> 
    <div id="contentholder"> 

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

     <!--- other contentitem ---> 

    </div> <!--- end contentholder ---> 
    </div> <!--- end contentscroll ---> 
</div> <!--- end content ---> 

Dies ist die CSS:

#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; } 

Dies ist die JS:

$('.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'; 
} 
}); 

Kann mir jemand helfen? Verwendet Cycle CSS Property auf .photo und .colors und diese Tatsache erzeugt dieses Problem? .name span e .price span scroll.

Answer 1

Ich habe mit DebugBar gesteuert: Zyklus einige Stile und Eigenschaften hinzufügen:

<DIV class=photo style="WIDTH: 280px; POSITION: relative; HEIGHT: 280px" cycleStop="0" cyclePause="0" cycleTimeout="0" jQuery1245766927421="13"> 

<IMG style="DISPLAY: none; Z-INDEX: 3; LEFT: 0px; ZOOM: 1; POSITION: absolute; TOP: 280px; HEIGHT: 0px" height=280 src="642_03_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="10"> 
<IMG style="DISPLAY: block; Z-INDEX: 4; LEFT: 0px; WIDTH: 280px; ZOOM: 1; POSITION: absolute; TOP: 0px; HEIGHT: 280px" height=280 src="855_02_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="11"> 
<IMG style="DISPLAY: none; Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px" height=280 src="856_01_prod[1].png" width=280 cycleH="280" cycleW="280" jQuery1245766927421="12"> 

</DIV> 

Es gibt einen position:relative auf Bilder div-Container und position: absolute, display: block auf den imgs. Ich denke, dass diese Attribute für das Problem verantwortlich sind, aber ich weiß nicht, wie Sie sie entfernen.

Answer 2

Datei jquery.cycle.all.js:

Linie 187:

// container requires non-static position so that slides can be position within 
    if ($cont.css('position') == 'static') 
     $cont.css('position', 'relative'); 

Line 212:

// set position and zIndex on all the slides 
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { 
     var z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i; 
     $(this).css('z-index', z) 
    }); 

Ich denke, diese 2 Teile des JS sind wichtig, das zu lösen Problem, aber ich weiß nicht wie.