Re: [WSG] colour matching transparent png files
On Wed, 11 Apr 2007 13:13:07 +1000, Andrew Harris wrote: Learned friends - hope you can help me. I am having trouble matching transparent png files to html background colours. The dodgy test page here: http://www.woowoowoo.com/pngtest/ illustrates the effect. twe melb wrote: As far as i know png alpha transparency does not work well in IE 5.5 and 6, On Wed, 11 Apr 2007 14:40:26 +1000, Lachlan Hunt confirmed: Correct. it seems to only works in firefox, And IE7, Opera, Safari, etc. i tend to avoid the use of png as it is not cross browser compatible, Nonsense! Aside from alpha transparency problems in IE6 (and earlier), PNG is widely supported. PNG8 supports index transparency, just like GIF, and that is widely supported. Alpha transparency can be used if care is taken to work around the limitations in IE6. i uses gif instead. Don't use GIF, it is inferior to PNG in every way. Animated GIFs are the exception, but they should be used sparingly anyway. 8-bit PNG works very well, even in IE 5.01. Graphics programs such as Photoshop add a lot of cruft to PNG files, so you need to get an optimizing tool. The result will likely be significantly smaller than a GIF. I believe that IE 5 Mac supports full alpha transparency, along with practically every browser made since then, with the exception of IE for Windows, as Lachlan points out. Please don't give up on PNG for the sake of one old make of browser! Give IE 5/6 Windows its own style that's usable but not quite as pretty. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
Please don't give up on PNG for the sake of one old make of browser! Give IE 5/6 Windows its own style that's usable but not quite as pretty. That has 42.3% of the market share. http://www.w3schools.com/browsers/browsers_stats.asp I use 24bit transparent pngs on my sites and then use a behavior.htc file to correct it in IE5 / 6 Windows - works fine (apart from with background-image as positions don't work so well). Ben -- e: [EMAIL PROTECTED] w: http://www.bendodson.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
On Wed, 11 Apr 2007 17:58:05 +0100, Ben Dodson wrote: Please don't give up on PNG for the sake of one old make of browser! Give IE 5/6 Windows its own style that's usable but not quite as pretty. That has 42.3% of the market share. http://www.w3schools.com/browsers/browsers_stats.asp And falling. :) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
On 4/12/07, David Hucklesby [EMAIL PROTECTED] wrote: 8-bit PNG works very well, even in IE 5.01. Graphics programs such as Photoshop add a lot of cruft to PNG files, so you need to get an optimizing tool. The result will likely be significantly smaller than a GIF. This is true. Alpha info changes the appearance of even 8-bit (indexed) PNG files in IE (and possibly Safari?), though Firefox and Opera ignore the information. My preferred fix is to re-save files using the GIMP. I'm sure there's a clever command-line script someone's cooked up that uses PNGcrush or similar, but I don't know it. -- Joshua Street http://josh.st/ +61 (0) 425 808 469 ABN 64 515 086 181 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
PNG has built in colour correction that creates problems when trying to match against a hexcode in the browser. If you really need png you can export a small backgroound tile for the area that it needs to blend into. http://hsivonen.iki.fi/png-gamma/ On 4/11/07, Andrew Harris [EMAIL PROTECTED] wrote: Learned friends - hope you can help me. I am having trouble matching transparent png files to html background colours. The dodgy test page here: http://www.woowoowoo.com/pngtest/ illustrates the effect. It's pretty self explanatory, but I want to run a div which matches the page background and provides a 'band' effect over a background image for me to run some type through. I specify the page background to #003366 In photoshop I specify the starting blue of the vignette to #003366 I also create a 20px square of #003366, set the opacity to 50% and save out a png24 with transparency Trouble starts in the browser though - the 'transparent' bands are almost always visible - if not in one browser then another. Now I have a fair hunch that this is to do with colour profiles, but my trial and error testing so far has only resulted in confusion and frustration. I get it almost right in Firefox and IE7 goes crazy or pretty good in both and Opera and Safari fall off. It's cross browser incompatibility gone mad! Is it just my browsers? (I doubt it!) Has anyone got any experience or resources that they can ease my troubles with? -- Andrew Harris [EMAIL PROTECTED] http://www.woowoowoo.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
On Tuesday 10 April 2007 22:13, Andrew Harris wrote: I specify the page background to #003366 In photoshop I specify the starting blue of the vignette to #003366 I also create a 20px square of #003366, set the opacity to 50% and save out a png24 with transparency save it to a png8 and you should be ok. -- Dwain Alford P.O. Box 145 Winfield, Alabama 35594 telephone: 205.487.2570 cellphone: 205.495.5619 The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** pgpxD5FcXDTfB.pgp Description: PGP signature
Re: [WSG] colour matching transparent png files
James, http://hsivonen.iki.fi/png-gamma/ thank you so much - explains everything! @Dwain - I need 8bit transparency, so png8 is not an option no, the article referred to by James has convinced me, sadly, that png24 is just going to cause me too many troubles - I'll have to find another way. Saved me heaps of time and frustration though! -- Andrew Harris [EMAIL PROTECTED] http://www.woowoowoo.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
As far as i know png alpha transparency does not work well in IE 5.5 and 6, it seems to only works in firefox, JavaScript must be use to fix this problem. check out this site, it might be of help to you http://homepage.ntlworld.com/bobosola/pnghowto.htm, i tend to avoid the use of png as it is not cross browser compatible, i uses gif instead. regard, Tan Le On 4/11/07, dwain [EMAIL PROTECTED] wrote: On Tuesday 10 April 2007 22:13, Andrew Harris wrote: I specify the page background to #003366 In photoshop I specify the starting blue of the vignette to #003366 I also create a 20px square of #003366, set the opacity to 50% and save out a png24 with transparency save it to a png8 and you should be ok. -- Dwain Alford P.O. Box 145 Winfield, Alabama 35594 telephone: 205.487.2570 cellphone: 205.495.5619 The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] colour matching transparent png files
With a little bit of use of the propriety DXImageTransform filter you can get by using alpha transparent PNGs in IE6 fairly safely. There is some strange behaviour when using the in repeating background images and with links on them, however both can be fixed (there are various articles out there on the net on how to do this) IE7 has native support for them so I'm starting to utilise them more while still providing backwards compatibility by using the filter hack above. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of twe melb Sent: Wednesday, 11 April 2007 2:06 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] colour matching transparent png files As far as i know png alpha transparency does not work well in IE 5.5 and 6, it seems to only works in firefox, JavaScript must be use to fix this problem. check out this site, it might be of help to you http://homepage.ntlworld.com/bobosola/pnghowto.htm, i tend to avoid the use of png as it is not cross browser compatible, i uses gif instead. regard, Tan Le On 4/11/07, dwain [EMAIL PROTECTED] wrote: On Tuesday 10 April 2007 22:13, Andrew Harris wrote: I specify the page background to #003366 In photoshop I specify the starting blue of the vignette to #003366 I also create a 20px square of #003366, set the opacity to 50% and save out a png24 with transparency save it to a png8 and you should be ok. -- Dwain Alford P.O. Box 145 Winfield, Alabama 35594 telephone: 205.487.2570 cellphone: 205.495.5619 The artist may use any form which his expression demands; for his inner impulse must find suitable expression. Wassily Kandinsky, Concerning The Spiritual In Art *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
On 4/11/07, twe melb [EMAIL PROTECTED] wrote: As far as i know png alpha transparency does not work well in IE 5.5 and 6, Thanks, you're right - but no problems there as I'm serving an extra css to grumpy old browsers It's a shame there are so many problems with png24 as the lack of a viable transparency solution leads designers into all sorts of workarounds (like javascript!) or the use of extra images to 'fake' transparency. I'm surprised this problem is still with us after gawd knows how many years of trying. For a little while, I went down the path of opacity: 0.5; but quickly found that nothing could be done to reverse the effect for children of the object - they all went wishy washy too! I'd be really interested in seeing examples of successfully implemented transparent elements in web pages if anyone has got them - not really interested in the javascript IE/hacks. -- Andrew Harris [EMAIL PROTECTED] http://www.woowoowoo.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
On 4/11/07, Andrew Harris [EMAIL PROTECTED] wrote: I am having trouble matching transparent png files to html background colours. The dodgy test page here: http://www.woowoowoo.com/pngtest/ illustrates the effect. On Wed, 11 Apr 2007 13:22:03 +1000, James Gollan advised: PNG has built in colour correction that creates problems when trying to match against a hexcode in the browser. If you really need png you can export a small backgroound tile for the area that it needs to blend into. http://hsivonen.iki.fi/png-gamma/ There are several tools that let you strip out this gamma correction data from PNG files. This has the added advantage of making the image files smaller (fewer bytes, I mean :) I use PNGOUTWin, but there are more you can google for. PNGOUTWin has a 30-day free trial[1]. It works great out of the box - no need to mess with the options. [1] http://www.ardfry.com/pngoutwin/ Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] colour matching transparent png files
twe melb wrote: As far as i know png alpha transparency does not work well in IE 5.5 and 6, Correct. it seems to only works in firefox, And IE7, Opera, Safari, etc. i tend to avoid the use of png as it is not cross browser compatible, Nonsense! Aside from alpha transparency problems in IE6 (and earlier), PNG is widely supported. PNG8 supports index transparency, just like GIF, and that is widely supported. Alpha transparency can be used if care is taken to work around the limitations in IE6. i uses gif instead. Don't use GIF, it is inferior to PNG in every way. Animated GIFs are the exception, but they should be used sparingly anyway. -- Lachlan Hunt http://lachy.id.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
