PDA

View Full Version : .png transparency errors



PaintballKidd
Sep 2nd, 2007, 06:27 PM
Hi everyone, I am having a very odd error, something I have never seen before... I basically have a .png image of tiny paw prints, repeated over a background just given the rule of "background: #f03" now, for some reason on random times...the paw prints are drawn as gray?!?! they are transparent .png's that have 30% opacity, so its hard to see them against a white background or by themselves...but against a nice red, they make up a pinkish color...but again on random times...on a reload the page will draw them up as a gray?? we isolated the problem down to the .png and caught it in the act of turning gray when there was no background color at all..anyways if you could take a look at the site, or you know that there is known bugs with transparent .png's..any help would be great thanks!
host98.hrwebservices.net/~awizard/about

Jutlander
Sep 2nd, 2007, 06:49 PM
IE < version 7 doesn't support transparent PNG's.

PremiumBlend
Sep 2nd, 2007, 10:11 PM
IE < version 7 doesn't support transparent PNG's.

I think IE6 supports single layer transparency, just not anti-aliased transparency.

CaptainB
Sep 2nd, 2007, 10:29 PM
I think IE6 supports single layer transparency, just not anti-aliased transparency.

Wrong. It is as Jutlander says.

Hawkstra
Sep 2nd, 2007, 11:20 PM
Thats why you need Mozilla Firefox :p

Sep 3rd, 2007, 07:21 AM
The only way to get Transparencies to work in IE6 is to use Javascript. It can be either loaded through the HTML file, or through the CSS as an .htc file (If you google IE6 Transparency Hack or something you will find them). I'd recommend if you need to use transparencies use a GIF, or rethink your template slice. Cheers.

Bill Posters
Sep 3rd, 2007, 09:10 AM
The only way to get Transparencies to work in IE6 is to use Javascript.
Wrong. You don't need javascript. Javascripts which help to kickstart IE<7's ability to display alpha transparent PNG files typically only automate the generation of the CSS which is what is actually used to kickstart the support.
If there are only a handful of alpha transparent PNG files on a site, it might well be better to simply implement the CSS 'workaround' manually. This means that the PNG still works even if js isn't supported or enabled.


PaintballKidd, adding this after your main CSS style element should sort out the problem.

<!--[if lt IE 7]>

a {
position: relative;
}

#pawback {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="pawback.png",sizingMethod="scale");
}

<![endif]-->

You should also look into using external stylesheets.
http://www.w3schools.com/css/css_howto.asp

e.g.

<link rel="stylesheet" type="text/css" href="main.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iewin.css" />
<![endif]-->

See also:
"Conditional comments": www.quirksmode.org/css/condcom.html

Jutlander
Sep 3rd, 2007, 03:22 PM
I'm not too happy about all this invalid CSS. This also goes out to all the people who recommend using the zoom property.

Couldn't one just make a .jpg image transparent instead?

ahallicks
Sep 3rd, 2007, 04:27 PM
Or a gif? On an image such as a very opaque paw print, surely you don't need a high quality image such as a png when a gif would do the job very nicely? If you are going to use hacks in CSS then create a stylesheet for IE that is commented out in conditional statements. It's not pretty, but at least it will keep the dirty code away from the main portions of your web site.

Jutlander
Sep 3rd, 2007, 04:40 PM
I wasn't recommending to use .jpg when I wrote it, but like .png, it can have over 16 million colours. Gif can only have 256 IIRC. But yes on a black/white image like a paw as you mentioned, I would choose a .gif too.

PaintballKidd
Sep 3rd, 2007, 10:53 PM
this is all really good and all...but even in firefox, (which is where we are developing this site) were we getting those issues...and another hint to solving this wierd mystery, i had the page open...refreshed (they suddenly turned gray) then I click on bookmarks or tools or something then just clicked off somewhere so the drop down box went away and when it did...the space that it took up the went into the page, only in that space did all the paws go to the correct coloring.....hmmm...its soo hard to describe, but....almost like if I covered up part of the page, then gave it a tan...all the paws got tan (gray) and when I opened the tools dialog box (remember this is all in firefox) when it went away the space that it took up, everything under that was exactly how it was supposed to...so as we were looking at the page, 90% of the paws were gray wile this little space was correct?? meaning there is some kinda bug or error out there...I believe if you just keep going to that site, and keep hitting refresh...it will happen...thanks guys, hope I nip this in the bud