jquery cycle IE7 transparent png problem

Coupled with the "wrap the image in a div / fade the div" tactic previously mentioned, using this line of CSS will fix the IE issue:
<pre>
#div img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png');
}
</pre>

I had this problem with Drupal Views Slideshow using the Fade transition on transparent PNGs.

I stumbled across the following quasi-solution totally by chance. I don't know why it works, but the drawback is it essentially removes the cross-fade envelope in IE (it doesn't appear to visibly affect FF or Safari):

Views Slideshow will print something like the following as part of its output:

<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>

I hid views-field-field-photo-fid:

.views-field-field-photo-fid { width: 0px; }

Not perfect but maybe good enough till I find a better solution. You can take a look at the development site:

[To see links please register here]

For me it worked to just include the filter property with blank value in jQuery's .animate()function

Maybe this will work for you, too.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

This has been driving me mad for the last few days! Finally found a decent solution that works pretty well.

Add this to your CSS:

<pre><code>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;
}</code></pre>

Credit: <a href="http://www.sitepoint.com/forums/showthread.php?t=590295#postcount4722567">Dan Tello</a>

This is all pretty hectic stuff you're being asked to do. All very coding codingsky.

Here's my suggestion. IE will not allow a png background above a colored background to live in peace, like so...

<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div>
<div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>

Notice the first div is z-index 2(on top of 2nd div).

This can be simplified by putting your bgColor in the background css in the 1st Div and doing away with the second div. This solves the problem of the black areas. I had this problem myself.

The only way I can see you having a problem where you can't use this method is where you have the need to overlay two png background images over one another and fade simultaneously. Don't do that. You'll need to animate each one after one another.

I'm also using Weezy's solution but doesn't play nice with IE7. The effects is even worse.

When assigning jQuery opacity-property to animate-function instead of Black-Border-Bug it generates a Black&White-Border-Bug :-P So I did the following for IE8;

In the head IE8 conditional comment with the HTC behavior on class .fixpng especially for htc.

<!--[if IE 8]>
<style type="text/css">

.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->

changed HTC-file to IE8pngfix.htc. Changed line 75 in the .htc to

> !/MSIE
> (8)/.test(navigator.userAgent

It's actually double-filtered, first IE conditional and then in htc, but what the hell!

I found that because htc could interfere with jQuery. Example;

<pre>
[div id="tooltip" class="fixpng"]
</pre>
Had to change $(div#tooltip).css({opacity: 0}) to display:none in CSS and set display: 'block' in hover-event.

So if anybody has found a working solution for IE7 I would be really happy. All the workarounds /hacks above don't work for me. About IE6 I don't care any second.

1. Define a solid background color to your image:

<pre>
.container img {
background-color: white;
}
</pre>

2. Define the **background-image** css property of your image to its **src** attribute:

<pre>
$('.container img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
</pre>

Advantage: you don't need to change your markup

Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.

Ok so I took Darko Z suggestion about the div. In the end this is what I had to do to be able to get jQuery Cycler fadeing FX to work on IE with drupal 7. Instead of placing an <img> tag I used divs and applied the.png to the background of the image along with

So I changed this:

<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>
</div>

to this:

<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>

then in the css I did:

.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(

[To see links please register here]

) no-repeat;}

and it works for now =D.

Hope it helps,
Defigo

To solve this issue simply add:

"filter" : ""

to your .css() or .animate() and it'll fix a number of IE related issues.

I've got the ultimate solution for this damn IE-PNG-BlackBorderProblem when using fading or other jQuery effects. It is working in every IE > 6 even in IE8!:

1. Download jQuery's pngFix at:

[To see links please register here]

2. Modify this script by searching:
`if (jQuery.browser.msie && (ie55 || ie6)) {`
and replace it with:
`if (jQuery.browser.msie) {`

3. create a blank.gif (1x1 transparent gif)

4. put a:
`.pngFix( {blankgif: '< relative location to the blank.gif >'} );`
at the end of the line where you perform jQuery effects eg.
`$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );`

5. make sure that all pictures have been loaded before you use jQuery effects within your document ready function by using the .load event on the window DOM-Element:

`$(document).ready( function() {`
`$(window).load( function() {`
`$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );`
`});`
`});`

6. Load page in IE8 and feel happy ;-)

7. You can see it in action on

[To see links please register here]

No ugly dark borders anymore around some animated PNGs in IE.