PNG images look awful in IE 7 but look fine on all Mac Browsers

Discussion in 'Web Design and Development' started by MacDonaldsd, Apr 10, 2008.

  1. macrumors 65816

    MacDonaldsd

    Joined:
    Sep 8, 2005
    Location:
    London , UK
    #1
    Hi,

    Im having a problem whereby all of my PNG images look terrible in IE 7 ( I haven't got IE 6 to check).

    I have posted an example below, any help and advice would be much appreciated.
     

    Attached Files:

  2. macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #2
    I thought IE 7 handled .pngs better...

    Try a different format first. Otherwise do you have a link? Or is it local?
     
  3. thread starter macrumors 65816

    MacDonaldsd

    Joined:
    Sep 8, 2005
    Location:
    London , UK
    #3
    Hi,

    Its being tested locally at the moment, but I need the transparency so I can't use JPEGs.

    It seems to look fine in all Mac browsers, but bad in all Windows based browsers.
     
  4. macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #4
    ^^ What about a good old .gif?

    Otherwise you could use a good old Javascript with an image with the "correct background"

    Code:
    <script type="text/javascript">
    	if(navigator.userAgent.indexOf("MSIE 7")!=-1 || navigator.userAgent.indexOf("MSIE 6")!=-1){
    		document.writeln('<img src=imagewithbackground.jpg></img>')
    	}else{
    		document.writeln('<img src=imagewithtransparency.png></img>')
    	}
    </script>
    <noscript>
    	<img src=imagewithtransparency.png></img>
    </noscript>
    
     
  5. Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I second trying gif. The images you posted are simple so gif should have good enough quality and handles transparency. Also, there's tons of articles written about hacks to get around IE's pitiful handling of pngs, just make a search.
     
  6. macrumors 6502a

    Joined:
    Apr 2, 2007
    Location:
    Leeds, UK
    #6
    Sorry for being a pedant, but I don't think that teaching bad habits is a good thing.

    1. Browser detection is nasty, and should be avoided at all costs. A transparent GIF avoids this, so that should be the chosen solution if indeed IE still can't handle PNGs properly.
    2. document.writeln() is nasty. Much better to use the DOM:
    Code:
    document.getElementById('myimage').setAttribute("src","/path/to/image.jpg");
    If that doesn't work in IE, then try
    Code:
    document.getElementById('myimage').src = "/path/to/image.jpg";
    
    3. Attributes should always be quoted.
     
  7. macrumors 68020

    kkat69

    Joined:
    Aug 30, 2007
    Location:
    Atlanta, Ga
    #7
    This statement is so false (xxxxxxxxxxxxxxxxxx) since Safari, Firefox, Opera, et al are Windows Based browsers AND Mac Based browsers and often if not always handle PNG transparency better. They are sometimes preferred to be coded for than say IE. IE the only current Windows only, with the exception of previous versions that actually RAN on Macs typically has bad history with PNG transparencies. There is code to utilize the IE DOM to render PNG transparency properly but I'm not going to get into it since it can be googled.

    Transparent GIFs if possible, should be used that way they are more consistant with any browser until IE/MS get off their butts and decide to manage their DOM better so it's more in line with other browsers rendering engines. Often though PNG's are preferred since they handle the transparency better IMO.

    Google on PNG and IE and you'll find CSS tricks to render the PNG properly. Also how the PNG is saved helps, 8,24,32bit plus Matte value help. You'll end up utilizing some of IE's built in filters more than likely.

    I've done websites with transparent PNG's and it's worked in IE (except 5 and below) just fine but requires some careful planning with both stylesheet and saved format.
     
  8. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #8
    I'm rather curious what you're using to produce the funky PNGs, since I've had no trouble getting IE7 to work with PNGs with either simple transparency or a full alpha channel without any hacks whatsoever. Both produced by Photoshop in my case, though.

    Also, are you setting height and width on the image? If so, is it possible you've set it to something other than the image's actual dimensions and IE is screwing up the scaling?

    IE6 is a different story entirely--it definitely won't handle an alpha channel without a hack along the lines of the one mentioned (though I like the pre-built supersleight script myself--it's been mentioned before on this forum).
     
  9. thread starter macrumors 65816

    MacDonaldsd

    Joined:
    Sep 8, 2005
    Location:
    London , UK
    #9
    Hi thanks for every ones input.

    Changing it to gif doesn't seem to solve the problem ether.

    I explicitly put the image width, height and border in the html so it isn't a scaling issue.

    If it matters I used illustrator CS3 and used the save for web and devices option.
     
  10. macrumors 68020

    kkat69

    Joined:
    Aug 30, 2007
    Location:
    Atlanta, Ga
    #10
    It could be a combo of both the method of exporting and how the image is added (ie., code)

    Example below was done about 2mins ago using Fireworks MX (yes it's old but for what I do in the office it's perfect) and I added the image, just dropped it onto an HTML page and rendered it. As you can see in IE 7 the transparency renders fine. The image was exported as a 32bit PNG with the Matte set to white. It's hard to see but it did render proplerly.
     

    Attached Files:

  11. macrumors 68040

    ezekielrage_99

    Joined:
    Oct 12, 2005
    #11
    Use a GIF, transparent PNG are crappy in IE any version
     
  12. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #12
    Are you SURE you're setting the correct height and width? That's the only reason I can think of that a GIF would do the same thing, other than some weird script error. Try without just to confirm what happens.

    Also, if you're not able to post the actual page you're working on, could you at least post the actual PNG and GIF you're having trouble with? I, at least, would be interested in looking at it.
     
  13. thread starter macrumors 65816

    MacDonaldsd

    Joined:
    Sep 8, 2005
    Location:
    London , UK
    #13
    Yeah sure:

    I attached the original PNG, and the GIF which have made less busy to see if that helped.
     

    Attached Files:

  14. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #14
    Ok, assuming that those are the exact images you're using, unless the image is huge on the page, I was correct--it's because you're resizing them by setting an explicit height and width smaller than the actual image. The PNG is 137x74, so unless you're using width="137" height="74", you're resizing them, causing the distortion you're seeing.

    IE7 handles PNG alpha channels well enough (IE6 won't without the previously mentioned hacks), but it does an awful job of downscaling images on the fly, which is what you're seeing.

    Make a PNG or GIF that is the actual pixel dimensions you want your final image to be on the page, and use that--it'll work.

    (Also, even if downscaling worked properly, you've still got weird sizes--that PNG is 137x74 pixels, and since 137 is a prime, you're going to be changing the aspect ratio no matter what values you use.)
     

Share This Page