1

I'm really loving the jQuery cycle plugin but am having serious trouble getting it to behave appropriately in IE8. In all of my cycles I'm using png files with transparencies (no differently then any other modern site on the web). They look very good in EVERY browser but IE where I get ugly black shadowing around the edges of gradients and all black background behind one of the slideshows. I'm using the 'cleartype: true, cleartypeNoBg: true,' fix in all of the slideshows as well as the following CSS fix:

img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

In the main slideshow I have two overlapping - http://microstrain.com

And in the bottom three column section I have a cycle running in the 'News Update' section.

Any help would be greatly appreciated here!!! - Scott

7
  • I'm uncertain what error you are seeing, but PNG's have various issues with various IE's. Try converting you png to a gif and see if the error persists.
    – Khez
    Apr 11, 2011 at 16:08
  • In my experience, trying to get IE (except maybe 9, though I have my doubts) to do any sort of image compositing involving an alpha channel is hopeless. It's quite amazing in fact how terrible it is at such basic operations.
    – Pointy
    Apr 11, 2011 at 16:09
  • @Khaz "converting" a PNG with an alpha channel to a .gif file is not likely to make the alpha channel rendering look any better :-)
    – Pointy
    Apr 11, 2011 at 16:10
  • @Pointy, that depends. Animating opacity (fade in) then removing the alpha filter can look worse with a PNG with alpha channel than with a GIF. At least the GIF looks the same at every point in the animation. ;) Apr 11, 2011 at 16:21
  • @eyelidlessness well yes I'm sure that's true, but it still represents an abandonment of the original design goal (which, I agree, is probably unavoidable anyway).
    – Pointy
    Apr 11, 2011 at 16:31

1 Answer 1

0

I know you set the zoom & transparency, but try setting them on the div encompassing the a which encompasses the image tag.

I ran into this recently on another site of mine and found the 'img' tag did not work but setting it on '[container] img' did.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.