PNG disappears in IE

We are about to launch our new non-profit site and I was wondering if anyone can figure out why our logo disappears in IE?

It is a 24bit PNG and I’m using the js included with ModX so that the transparency works correctly.

This is on 0.9.6 RC1and we want to go live soon. I’m still working through trying to replace MaxiGallerySolo and old ditto 1.0 calls. But this png issue is a pesky one. When will IE die? 

Here is the modx dev url in question: w11.eleven2.com/~likhaorg/

Here is the old static asp page: www.likha.org

The logo appears here on IE 7 but your flyout menus remain after leaving the main menu selection so that after running the mouse down the main menu there remains a stack of level 2 menus.

Edit: My mistake, thought the image above the menu was your logo but it isn’t a 24-bit png.

Ok, I promise I am trying to help and not confuse you.

On the development site, the png does appear on IE 7 (5730.11).

Thanks for looking.
The logo appears correctly above the left suckerfish menu in Safari and Firefox.
But in IE6, as soon as the page loads, it does a disappearing act?

The url in question is this:
http://w11.eleven2.com/~likhaorg/

Do not have IE 6 installed anywhere sorry.

On the menus:

Moving the mouse onto a main selection then off without moving to a different selection causes the flyout to dissappear.

Moving the mouse onto a main selection then to a new main selection causes the new selection flyout to appear on top of old selection flyout.

You could download the standalone version of IE 6 if you wanted to test that alongside of IE 7: http://browsers.evolt.org/?ie/32bit/standalone

You just unzip it and run it, I don’t think you even have to install it.

PNG transparency was not supported properly in IE6. Getting it to work as a regular embedded image required some JavaScript, whereas using them as CSS background images required a proprietary IE filter. The MODx script you’re using here applies a filter using JavaScript, and it requires a transparent gif (var blankSrc = "assets/js/x.gif"; ), which might be missing in your case and causing the problem.

Personally in your situation I would either:
a) make the image a background and apply the ImageTransform filter in your CSS file(filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’your.png’); ),
or b) use a gif instead (24-bit PNGs are much larger files; a little reworking of the design could turn this into a gif).

I’ve used different scripts to get PNG transparency in embedded images, but they’re less accessible and reliable than the background filter method, so I generally look for ways to avoid them.

I haven’t used it and I didn’t see it specifically mentioned, so I’m just throwing this out there: PNG-Alpha Transparency for MSIE in the MODx Repository

I would just avoid the problem all together. You already have a full page background saved as a PNG which is over 100k. Save that same file as a JPG image and you are a little over 30k with no visible loss in quality. Just flatten your logo onto those backgrounds and you will shave off the additional image and the code to load it for a significant size decrease.

Maybe I am missing some function here but I don’t see any reason to make these png files.

well i can see the logo on your website in IE6 and fire fox
so i dnt know how you are facing problem.

Quote from: Whitefen at Mar 28, 2007, 05:49 AM

Maybe I am missing some function here but I don’t see any reason to make these png files.

One benefit of PNG over JPG is the ability to use transparencies. There’s plenty of application use for a transparent image in a website, especially when you need to display images over patterns and such.

Another benefit is PNG’s can be HTML compressed as the server level without any file size increase vs. JPG/GIF which are already compressed.

Here’s a great article on why you should use PNG over GIF. I still use JPG for most everything I do, but there are occasions where PNG’s have there place... which was the point of this thread.