Forum user: wecko

> If the image or any of its parents has a "position:absolute/relative", it will not fade.

> It will work if I let the default "position:static" or if I set a "float:" attribute.

> Using background images instead of <img /> tags will have exactly the same results.

Finally I tried to recreate a simplified version of the slideshow system without using JQTools (fadeIn/fadeOut), and it doesn't change anything.

So it's either a JQuery core or an IE interpretation problem. The latter seems obvious, because the tooltip tool 'fade' effect already has a parameter which deactivates the opacity fading if IE is detected. Now I'm sure both are related.

Damn IE.

So you can now close this thread and hope for IE9 to be more compliant.

Thanks for your time and those awesome tools.

That's a good question. I'm not an IE lover so I would blame the browser, but as IE8 has a close-to-perfect CSS2.1 support, I'm not so sure.

And it doesn't explain the fact that it works on both IE6 & 7 but not on IE8.

So far I didn't find something consistent enough to help me on this subject. Seems like I haven't identified precisely the source of the problem.

Ok, after a couple of tests I finally found something you should take a look at.

If I'm using the Tabs:slideshow plugin with the 'fade' effect, and I put images on which I set a CSS position attribute, this images isn't faded anymore on IE.

Try yourself - just apply a position:relative on your images in this example :http://flowplayer.org/tools/demos/tabs/slideshow.htm and see the result.

The position:relative is though supported by both IE6 & 7, but not 8.
And the absolute positioning is not supported at all, regardless of the IE version.

None of these bugs were reported on FF and Safari.

I'm using a very basic set of elements here :

<div class="tabs"> 
  <a href="#"></a> 
  <a href="#"></a> 
</div>

<div id="panes">
            
  <div class="pane">
    <img src="images/image1.jpg"/>
    <p>Lorem ipsum...</p>
  </div>
	
  <div class="pane">
    <img src="images/image2.jpg"/>
    <p>Lorem ipsum...</p>
  </div>

</div> <!-- / panes -->

Styles :

#panes {
  width:820px;
  height:303px;
  position:relative;
  top:10px;
  left:80px;	
}

#panes .pane {
  display:none;
  position:absolute;
  top:0;
  left:0;
}

#panes .pane img {	
  float:left;
  margin-top:15px;
}

With this Tabs+Slideshow configuration :

$(".tabs").tabs("#panes .pane", {
				
  effect: 'fade', 
  fadeOutSpeed: 1000,
  rotate: true
  }).slideshow({
    
    autoplay: true,
    interval: 8000,
    clickable: false
});

All is working well, excepting a curious issue with the fade effect in IE8. Actually there's no effect at all, the images visibility simply switches. Weird. Only the images are affected, the text fades correctly.

Notice that all is working perfectly in all other browsers, including IE6(!) and IE7.

Does anyone have the same issue ?

You can see that my example isn't quite different from the slideshow example on the JQTools site, where I've noticed some auto-generated "filter:" attributes applied on the <img> inside the panels. In my example, these attributes only apply on the root panes. Any idea ?

Thanks