PNG Transparency

This is a discussion on "PNG Transparency" within the Web Page Design section. This forum, and the thread "PNG Transparency are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Feb 23rd, 2007, 20:47
Elite Veteran
Join Date: Dec 2005
Location: On Internet
Posts: 4,859
Thanks: 0
Thanked 0 Times in 0 Posts
Cool PNG Transparency

Why in IE6 does the transparency for png's not work. Is there a way around this?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Feb 23rd, 2007, 20:58
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,519
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: PNG Transparency

this is a known bug in IE6 and fixed (I think) in IE7. I have used IE7 a
lot and haven't come across this problem while using it so I guess that Mr gates must be telling the truth.

There are a number of "workarounds" particularly if you are building
websites, it seems the open source community are yet again doing things that
Microsoft can't or won't(?)

One of the easiest workarounds was to use GIF!!

If you were editing the image in Adobe then make sure you are using it in
"RGB" and not "Index" modes because this will play merry hell with colour and
balance. This may happen in other image editors as well but I cant be sure

you may also want to look at this http://www.zelph.com/archives/2005/0...arency-script/
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)

Last edited by saltedm8; Feb 23rd, 2007 at 21:01.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Feb 23rd, 2007, 22:16
Elite Veteran
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: PNG Transparency

Here you go Jacob

Cross-Browser Variable Opacity with PNG: A Real Solution

Or one of these:

PNG in Windows IE: How To Use
PNG Behavior
PNG overlay using one single Image element
Improved PNG Behavior

Last edited by karinne; Feb 24th, 2007 at 20:37.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Feb 26th, 2007, 16:13
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: PNG Transparency

IE 7 handles PNG files correctly, IE 5.5/6 require a hack IE pre 5.5 out of luck.
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Feb 26th, 2007, 16:23
Elite Veteran
Join Date: Dec 2005
Location: On Internet
Posts: 4,859
Thanks: 0
Thanked 0 Times in 0 Posts
Re: PNG Transparency

What hack would you recommend moojoo?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Feb 26th, 2007, 18:32
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: PNG Transparency

I just got through doing this five seconds ago. I used php and a browser sniffer to replace the .png with a .gif, which is easy enough (code below). My problem was making a transparent .gif for text that looked good. I found you can do an okay transparent .gif with text if you give the transparency a broad tolerance an make all partially transparent pixels opaque.

If you don't know PHP, I'm pretty sure you can just cut and paste this snippet in (as long as your ISP has php enabled); just be sure to use a ".php" file suffix instead of ".html" on any file you use it in.

Code: Select all
<?php
$brw= $_SERVER['HTTP_USER_AGENT'];
            if ((eregi("msie", $brw)) && eregi("[6]\.[0-9]", $brw)) {
                    echo '<img src="images/foobar.gif" ';
                    } else {
                    echo '<img src="images/foobar.png" ';
                    }  
?>
width="33" height=...  />
change "images/foobar.gif" to the relative location of your .gif file, and the same for the .png file.

This is for IE 6.*. If you want to include earlier versions of IE, you'll need to modify the regex. I may get around to it, but I'll tell you, worrying about pre-6.0 IE is not a big priority for me.

(PS the code goes where the beginning of "<img " would go in html.)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
css

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
PNG Transparency in IE6 Jack Franklin Web Page Design 1 Jan 26th, 2008 15:47
PHP Image Transparency tox0tes PHP Forum 2 Dec 28th, 2007 00:31
PNG transparency fon IE 6 Voodoochilli Webforumz Cafe 10 Jul 19th, 2007 14:26
transparency Daniel Graphics and 3D 10 Jan 16th, 2007 20:17
PNG Transparency in IE 5 darudeuk Graphics and 3D 2 Jun 9th, 2006 19:35


All times are GMT. The time now is 16:53.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42