13 replies [Last post]
SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

It's been discussed before, but work arounds seem few and far between

In short, can I use any kind of PNG fix available on the net to set a PNG with alpha to be supported by at least IE6? - And more important for me, can I set a background: to have a png and work correctly in IE?

This webpage has a working example that even works on this Macs IE 5.2:
http://redvip.homelinux.net/varios/explorer-png-en.html

The code looks like this:
Tux

An example I've tried myself is here:
http://cressaid.brettjamesonline.com/testground/transperancy.html
Top image is with the fix, bottom one is just:
#box
{
background:url(transperanttest.png);
width:400px;;
height:300px;
}

Is it possible to apply this or any other fix to a background image?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

In short yes. Google on IE

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.

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

The alpha filter method

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...

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I don't know the answer to

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Thanks for your time

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?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Well, I'm not gonna try and

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

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

also, if you are going to

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.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Wow, it does work!

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 Smile

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

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, i also tried some of the

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.Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

Hey Mihir - I know exactly

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

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hi, i did download the file

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 Smile

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

To sort out some

To sort out some misconceptions...

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

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.

mihirc wrote:
i also tried some of the fixes and they did work, but at the cost of disabling all my links in FF.

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.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

actually i site i am working

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)

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

SuperRoach
SuperRoach's picture
Offline
Enthusiast
Ballarat
Last seen: 9 years 12 weeks ago
Ballarat
Timezone: GMT+10
Joined: 2007-02-26
Posts: 291
Points: 6

First, chris is right - If

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.