Problem: PNG transparency in Internet Explorer

**Culip** · Apr 4, 2004, 12:55

Nice to meet you, I'm a Japanese SH student and it's first time to watch this web site.

Culip -The Official Naoki Oyama Web Site-

I make my own webpage which is best views with new Mozilla family (e.g. Firefox 0.8).

I made the top page titles (transparency PNG) displayed by CSS "background" propaty, not HTML "img" element.
Because I'd like to avoid the problem with Netscape 4 family.

Fortunately, I could do it with no problem when I use the style sheet elegance .

However, when I changed the new style sheet Sakura, the new titles couldn't display fine with Internet Explorer! Firefox was fine-viewing.

What shall I do? Thank you for your cooperation. Naoki

**redux** · Apr 4, 2004, 13:22

http://www.google.com/search?q=PNG+IE

**Paul O'B** · Apr 4, 2004, 13:59

Hi,

IE doesn't support opacity in png files but you could try using the proprietary iE alpha image loader.

e.g.
CSS:

Code:

html>body #title-home{
height	 :200px;
background :url('http://culip.grow-web.jp/style_sheet/sakura/title.png') no-repeat center top;}
* html #mask-titlehome {		 
height	 :200px;
background-color/* */:/**/transparent; 	/* ...for IE5.5 & 6 */
background-color: /**/transparent;	 /* ...for IE6 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://culip.grow-web.jp/style_sheet/sakura/title.png', sizingMethod='image');
margin:auto;
}

html:

Code:

 
<body>
<div id="mask-titlehome">
<h1 id="title-home"><span class="hide">CULIP</span></h1>
</div>

Something like that should work (but I haven't really looked deeply into this

)

Paul

**Culip** · Apr 4, 2004, 14:01

Thank you for helping me. I could slove this problem.

I use Paint Shop Pro 7 (Jpanese) and I changed the title image.
I think PNG transparency divided into 2 types: "simple transparent" and "alpha channel transparent".

The problem image (4398 bytes) was the latter, and the new one (2766 bytes) is the former.

(But my assumption could be wrong.)

* * * * * *

Dear Paul O'B

Thank you very much for helping me. Although I'm sorry I didn't have to use your source, I'm very interested in that.

I'll change my style sheet again in the future, more advanced, more cool.
I don't have to affraid the problem PNG-24 transparency with IE.

Thanks again. Naoki

**Paul O'B** · Apr 4, 2004, 14:25

Glad you got it sorted Naoki (and welcome to sitepoint)

**dubya** · May 12, 2004, 04:48

I've been frustrated by this for a while now. Someone just sent me this though which appears to fix the problem in IE 5.5 & 6

http://homepage.ntlworld.com/bobosola/

**Egor** · May 12, 2004, 05:26

Cool that is a nice fix. If only Microsoft got it right the first time it would save all this trouble

**ClevaTreva** · May 12, 2004, 07:43

Hi

And don't forget that IE messes up the pallette of palletted png's. Don't believe me? Make a 256 color palletted png with a known background (like #3322BC) and insert it into a div with the same background color.

View it in IE and FF. FF gets the color right (ie they match). IE doesn't. It's OK with true color (bloated filesize).

Trevor

**pixelhed** · Aug 14, 2004, 03:25

Hi
I have the problem that you describe about IE messing with the pallete of my pngs (the alpha transparency issue i have sorted - javascript solution). Is there a way to overcome this color issue? I am using 24bit pngs, with transparency exported from photoshop. Is that correct?

There must be a way around this.

A

**ClevaTreva** · Aug 14, 2004, 05:57

Hi

Well, I use Paintshop Pro to make my 24 bit png's with no pallette problem, BUT I do not use alpha transparency. Paintshop Pro gives you the alterntive option of single color transparency ala GIF's. THIS option works OK in IE.

My preference is to use GIF's now when I require transparency, especially as the worldwide patent issue has now expired. Ture you can only have 256 colors, but I find I usually use GIF's just for logo's etc where transparency is useful.

Trevor

**pixelhed** · Aug 14, 2004, 10:57

Good News!

I have a solution that works for correcting png's made in photoshop and displaying them with alpha transparency in ie (works for other browsers too)

See this thread for details.

laters
A

**ClevaTreva** · Aug 15, 2004, 05:57

Hi

That link doesn't work. Could you re-check it and re-post?

Trevor

**Paul O'B** · Aug 15, 2004, 06:15

Hi Trevor,

The thread is here:

http://www.sitepoint.com/forums/showthread.php?t=187929

Paul

User Tag List

Thread: Problem: PNG transparency in Internet Explorer

Thread Tools

Display

Problem: PNG transparency in Internet Explorer

Thank You!

Javascript solution for IE 5.5 & 6

Bookmarks

Bookmarks

Posting Permissions