PNG in Internet Explorer

PNG, files are not being displayed correctly in Internet Explorer, on a web-page i have created.

The backgrounds are not transparent. Firefox displays them correctly but not IE.

Is there some code that will fix this problem as i do not want to limit the web page to firefox users only.

Thanks in advance.

#312647

ahh..oops....nevermind this..*delete

#312649

IE doesn't support alpha-channels in PNG images (as you have noticed ;) ) .

The easiest way around it is to use other image types or have an alternate version for IE.

Otherwise there is an option to have the transparency loaded using Javascript which will not work if JS is switched off.

Documents on JS filter:

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

http://www.themaninblue.com/writing/perspective/2004/06/18/

#312657

Use the pngbehavior.htc method... Google it. It does not require JS to be enabled.

Works perfectly. no need to create alternate image sets for IE users.

Edit:

And this is not an issue for IE 7. It fully supports PNG image files.

But we'll have to wait for that to be released of course. :)

#312661

Too bad none of these work for CSS table backgrounds...

#312684

Nor do any of these i have come accross work for css div backgrounds either. I came upon an article somewhere saying that it is possible, but something else happens was some time ago so I can't really remember. Guess we'll just haveto wait for IE7, though by that time firefox will rule the world! mwwahahaha.

#312688

I don't see any problems in using png's on a homepage and viewing it on IE.

What you do is, unzip the javascript i'v attached to you directory with the homepage, and ad this sting to the

of the page:

<script type="text/javascript" src="../../unavailable.html">

Then you simply just insert your pngs just the same as if it was gifs or jpgs.

(hope the file I attached, is downloadable, since this is the first time I actually attach something :slant: )

png.zip

Attachment: png.zip

#312721

Nor do any of these i have come accross work for css div backgrounds either..

Actualy, you can use it with DIV's. Haven't tried it through a CSS sheet.

I have a logon page I developed that demonstrates this.

Here is a snipit from the page.

Place this in the head. DOES NOT REQUIRE JS BE ENABLED.

<style type="text/css" media="screen">

img {
behavior: url("pngbehavior.htc");
}

</style>

And here is how I used the PNG inside a DIV.

<div id="form" align="center" style="position:absolute; left:349px; top:187px; width:291px; height:291px; z-index:2; visibility:visible">
<form name="login" method="POST" action="null" style="color: #FFFFFF">
<p align="left"><font size="3" color="#E5E5E5">



Username</font>

<input name="username" class="INPUT" id="username" size="21" style="border: 0px solid #FFFFFF; color:#000000; font-family:Verdana; background-color:#FFFFFF; [b]background-image:url('images/pinput.png')[/b]">

<font size="3" color="#E5E5E5">

Password</font>

<input name="password" type="password" class="INPUT" id="password" size="21" style="border: 0px solid #FFFFFF; color:#000000; background-color:#FFFFFF; [b]background-image:url('images/pinput.png')[/b]"></p>
<font color="#FFFFFF">



<input type="reset" class="BUTTON" value="Reset" style="color: #E5E5E5"></font>
<font color="#FFFFFF">
<input type="button" class="BUTTON" value="OK" onclick="Login()" style="color: #E5E5E5"></font>
</form>
</div>

Just go here to see it in action.

http://www.users.qwest.net/~rjohnstone/

The home page background is a PNG gradiant.

Just do a view source to see how it was setup.

#312837

I used to have them on my website version 7 but now version 8, I forgot to include the JS file.

#324294

Yeah rjohnstone, we was talking bout this a couple of months ago. its pretty useful. No JS required too. I'm using it for my site now. And yeah, BaselineAce, it doesn't work with CSS.

#324361