SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member Culip's Avatar
    Join Date
    Apr 2004
    Location
    Japan
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy 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

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 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;
    }
    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

  4. #4
    SitePoint Member Culip's Avatar
    Join Date
    Apr 2004
    Location
    Japan
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile 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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you got it sorted Naoki (and welcome to sitepoint)

  6. #6
    SitePoint Member
    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/

  7. #7
    Non-Member Egor's Avatar
    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

  8. #8
    SitePoint Evangelist ClevaTreva's Avatar
    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

  9. #9
    SitePoint Member pixelhed's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Evangelist ClevaTreva's Avatar
    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

  11. #11
    SitePoint Member pixelhed's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by pixelhed; Aug 15, 2004 at 08:25. Reason: corrected link

  12. #12
    SitePoint Evangelist ClevaTreva's Avatar
    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Trevor,

    The thread is here:

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

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •