[Solved] PNG Transperancy - the showdown

In short yes. Google on IE png fix. Look up MSDN, CSS, Filters, AlphaImageloader Transform. You won't get repeat, but you can get stretch - which can be just the same depending on your image. Check to make sure any links/controls are still accessible. If the filtered element is placed in front, use position to put the links/controls back on top.

The alpha filter method didn't work for me in the end...

I stumbled across this idea:
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
Which is basicly include a htc file

I thought this trick would work, but i've hit a minor snafu:
http://cressaid.brettjamesonline.com/testground/ratiocalc.html
This is what I'm coding for.
I would like to have a transperant PNG inside the container div (the whole thing pretty much) that is used to darken the grey "grill"
Faking it with gif's darkened so far have been hell, and I don't think I'll ever be able to align them all up correctly.

It works in Firefox - whats the problem with ie?
Relevant code:
img, #container { behavior: url(iepngfix.htc); }
#container {
background: url('images/greycontainer.png');
/*background: url('images/greybackground.gif');*/
/*background-position: -229px 4px; */

width: 800px;
/* background: #F4ECD9; */
/* border: 2px solid #eda;
*/
border: 0px solid #222222;;

margin: 0px auto;
min-height: 500px;
padding: 0px;
}

*edit*

http://cressaid.brettjamesonline.com/testground/transperancy.html
I've narrowed it down to the tiling/repeat issue talked about before.

Is there a way I can still do this? You mentioned stretch, but I've never heard of anything like that before...

I don't know the answer to be honest but i do know that these png "fixes" do not work at all with tiling backgrounds.

my best suggestion would be to make a png that is the size you need it. if you have a 100% wide element you will want to make it like 2000px wide so widescreen monitors won't miss out and then apply the png "fix" to that.

It's not the best and fastest loading way, but it's pretty much the only choice i know of.

Thanks for your time deuce

http://cressaid.brettjamesonline.com/testground/transperancytrial.html

Here is a simple html file with a background. Now instead of tiling, its very large (4000px tall!). Since I'm pretty much doing what you said, except this is a 100% height (for lack of a better term)

There is a height in the css, and its set like this:

img, #container { behavior: url(iepngfix.htc); }

#container
{
width:800px;
background:url(images/greycontainer.png);
height:500px;
}

Works fine in firefox, but what happens in internet explorer 6? It cuts off after the first line of text. Really weird!

The really, REALLY frustrating part is that Mac IE 5.2 works fine too... :/ Anyone else got other versions of IE they can try?

Well, I'm not gonna try and frustrate you more, but it looks just fine in my IE6... well it looks the exact same as FF2

also, if you are going to have a fixed size, then you only need to worry about making the image the size of your element.

I was saying that if you are using % or em for the size of your element you will want the image to be bigger then the element so when the element expands due to screen resolution or content then the image will appear to stretch with it.

You are exactly right Deuce.... when I'm trying it via vnc to my IE6 at home I get the bug. But with IE 5.5:
http://browsershots.org/screenshots/87674c52f6193b43381472b41ac7eac2/
(From browsershots, the other browsers are here:
http://browsershots.org/website/http://cressaid.brettjamesonline.com/testground/transperancytrial.html )

I guess I might just go ahead and assume its working

The original site that uses it is this:
http://cressaid.brettjamesonline.com/testground/ratiocalc.html

Does that have a darkened middle (which is png element)? Works GREAT in firefox, and safari...

I guess this is a mini solution for now

Hi,
i also tried some of the fixes and they did work, but at the cost of disabling all my links in FF. so.. for my those fixes are not worth wasting time on. I just use those gifs and get on with it. If a client specifically demands then only, i try to get the png's to work.

mihir.

Hey Mihir - I know exactly the problem you've ran into, and if you want a working example check the link above.

Its to do with the z-index needing to be set, you needing to set a proper position: for the stuff your doing

I didn't run into it myself, but the tutorial sites have a few working examples with links doing there thing.
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
Is the script and stuff, but not the exact example I was talking about

So if you run into that problem, make sure that the element that's being pngified isn't "ontop" of your content and text links

Hi,
i did download the file he has linked to. But when i saw his "iepngfix.html" page, it is not rendering the png.

I will test it on a live site... later...

mihir

To sort out some misconceptions...

There is only the alpha filter method. Your htc script uses it. If you couldn't get the filter to work when you applied it directly, that means you were applying it incorrectly.

You only need to apply fixes to IE6*, which you can do using conditional comments. Done correctly there will be no impact on any other browser.

* also for IE5.5. Filter with support transforms, including the alpha image loader is only available from IE5.5.

actually a site i am working on now - www.anchordigital.net/index2.html uses the iepngfix by twinhelix

if you need help implementing it, let me know. it works on img and backgrounds in your css, but will not work on repeating backgrounds.

(link missing http:// on purpose as to not link whore)

First, chris is right - If you open the htc file up you'll see an elaborate way of it applying the alphafiltertransform effect to it.

So yes, it worked in the end, iepngfix is the way to go.

There is no way I could think of to tile repeating backgrounds, other than to make them extremely large. If your background is simple, your fine though (a flat colour with transperancy compresses to almost nothing, regardless of its size, and the one I have on the links above I made a 800 x 4000 image... was 92kb... meh)

Probably what happened to me was the good ol not refreshing the page I was loading properly in IE6 trick, as everything works ok now.