PNG not transparent in ie6/7

HTML & CSS
1

Hello,

Please visit the link below

http://www.vismarkgroup.com/dev/vision/

Notice the animating flash, in ie7 there is a gold background behind it. How can I get around this?

SIDE NOTE: How do you fellow mac users debug ie6/7 problems? Is there a way to get them installed on a mac?

Thanks!!!

2

If I remove the images in the acutal slideshow then the image comes to show.

I would think the problem lies within the actual iamges themselves because nothing I do can bring out the transparency in the images in the slideshow…

Mac users can setup a virtual OS and get IE there :slight_smile:

3

Thanks Ryan…

But why would the images show up fine through mozilla/opera/safari but weird in ie? I saved the png with transparency?

Do you happen to have a link on how to set up virtual OS?

Thanks again!

4

Hi,

The problem is that the script is applying the opacity filter to IE which causes png images to lose some of their transparency. It seems that IE is probably utilising the alpha image loader even for ie8 and the combination of filters causes the problems.

Either remove the opacity from the script or instead supply a background colour to the image to match the background. Or indeed we could supply the background image to the image’s background like so:



<!--[if IE ]>
<style>
.slideshow img{background:url(http://www.vismarkgroup.com/dev/vision/images/fbg.png) 50&#37; 50%}
</style>
<![endif]-->

It’s not 100% perfect but most people will never know. There is simply no other solution.

You can find more info here.

Re testing windows on a mac you could purchase Parallels (which I have installed on my mac) or use a free version of [URL=“http://www.virtualbox.org/”]virtualBox. Of course you still need licensed copies of Windows to install on these systems before you can add browsers etc.

5

Thanks so much for the reply…What exactly is the opacity filter doing in the script? If I remove the opacity portion of script it should be ok? I might just get rid of that all together as i want it to be as clean as possible

I will look into Parallels… thanks! I do have a licensed copy of vista so I might just do that

6

What exactly is the opacity filter doing in the script

JS isn’t my area but usually most of those type of slideshows create a slight fade as the image pops in and out for a smooth transition. You can see from the code that the opacity is being addressed even though it may not be utilised.