SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
-
Apr 4, 2004, 13:55 #1
Problem: PNG transparency in Internet Explorer
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
-
Apr 4, 2004, 14:22 #2
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Apr 4, 2004, 14:59 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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; }
Code:<body> <div id="mask-titlehome"> <h1 id="title-home"><span class="hide">CULIP</span></h1> </div>
)
Paul
-
Apr 4, 2004, 15:01 #4
Thank You!
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
-
Apr 4, 2004, 15:25 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Glad you got it sorted Naoki (and welcome to sitepoint)
-
May 12, 2004, 05:48 #6
- Join Date
- May 2004
- Location
- London (sometimes Sheffield), UK
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Javascript solution for IE 5.5 & 6
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/Dave
LightWorks User
-
May 12, 2004, 06:26 #7
- Join Date
- Jan 2004
- Location
- Melbourne, Australia
- Posts
- 7,305
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Cool that is a nice fix. If only Microsoft got it right the first time it would save all this trouble
-
May 12, 2004, 08:43 #8
- Join Date
- Jan 2004
- Location
- Chipping Campden, UK
- Posts
- 403
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"Good artists copy, great artists steal."
- Pablo Picasso
The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness
-
Aug 14, 2004, 04:25 #9
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
-
Aug 14, 2004, 06:57 #10
- Join Date
- Jan 2004
- Location
- Chipping Campden, UK
- Posts
- 403
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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"Good artists copy, great artists steal."
- Pablo Picasso
The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness
-
Aug 14, 2004, 11:57 #11
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
ALast edited by pixelhed; Aug 15, 2004 at 08:25. Reason: corrected link
-
Aug 15, 2004, 06:57 #12
- Join Date
- Jan 2004
- Location
- Chipping Campden, UK
- Posts
- 403
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi
That link doesn't work. Could you re-check it and re-post?
Trevor"Good artists copy, great artists steal."
- Pablo Picasso
The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness
-
Aug 15, 2004, 07:15 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Trevor,
The thread is here:
http://www.sitepoint.com/forums/showthread.php?t=187929
Paul
Bookmarks