jQuery Cycle dans un div horizontal scrollable: Problème IE

Question

J'ai un problème avec IE 6 et 7 avec un diaporama Cycle intégré dans un div à défilement horizontal. J'ai utilisé cette technique (http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div) pour créer la div scrollable horizontale. Je voudrais intégrer le diaporama Cycle dans le div scrollable. Tout fonctionne normalement en FF3, Opera, Chrome. Dans IE 6 et 7, le conteneur des images et les vignettes de nav sont fixes, ils ne défilent pas. Tous les autres div ou éléments du div scrollable fonctionnent bien.

Ceci est mon 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 ---> 

C'est le 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; } 

Ceci est la 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'; 
} 
}); 

Quelqu'un peut-il me aider? Est-ce que Cycle applique la propriété CSS à .photo et .colors et ce fait crée ce problème? .name span e .prix span défilement.

Answer 1

J'ai contrôlé avec DebugBar: Cycle ajouter des styles et propriétés:

<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> 

Il y a un position:relative sur les images contenant div et position: absolute, display: block sur les imgs. Je pense que ces attributs sont responsables du problème mais je ne sais pas comment les supprimer.

Answer 2

jquery.cycle.all.js de fichier:

Ligne 187:

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

Ligne 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) 
    }); 

Je pense que ces 2 parties du JS sont importantes pour résoudre le problème mais je ne sais pas comment.