PNG image appears darker in IE

Discussion in 'Graphics & Multimedia' started by ddzc, Oct 21, 2009.

  1. #1
    Hi all,

    I have a logo in my header file, which needs to blend in with the background of my homepage. The format of the header is png.

    I had a designer do it for me. It came out perfect in firefox and blended with my background perfect but in IE, the colors and tone of the header is darker than my background. We have no idea how to fix this issue because the colors were edited in photoshop with the exact code as the background and it appears perfect in firexfox, but darker in IE.

    I searched google about it and many people have noticed the same issue but I haven't found any resolutions?

    Any ideas?
     
    ddzc, Oct 21, 2009 IP
  2. ddzc

    ddzc Peon

    Messages:
    487
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    ...anyone?
     
    ddzc, Oct 22, 2009 IP
  3. Xavier_3D

    Xavier_3D Well-Known Member

    Messages:
    1,299
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    140
    #3
    Link of the site?
     
    Xavier_3D, Oct 22, 2009 IP
  4. ddzc

    ddzc Peon

    Messages:
    487
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Here you go couponfan.com

    Load it in IE and Firefox...firefox shows it perfect, in IE, the blue on the top of my header is a bit darker.

    Header file is: couponfan.com/header.png

    Thanks!
     
    ddzc, Oct 23, 2009 IP
  5. Ajdija

    Ajdija Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    it's only in older versions
     
    Ajdija, Oct 24, 2009 IP
  6. ddzc

    ddzc Peon

    Messages:
    487
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Behaves the same in IE 6 and IE 7
     
    ddzc, Oct 25, 2009 IP
  7. Xavier_3D

    Xavier_3D Well-Known Member

    Messages:
    1,299
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    140
    #7
    Well I believe the colour you are trying to use doesnot really make it to the list of the 216 web colour variants. So you better try to adjust it to something similar to those tones. Some colours don't display too well. My suggestion would be to remove that blue portion from the header and keep a single Background.
     
    Last edited: Oct 26, 2009
    Xavier_3D, Oct 26, 2009 IP
  8. stampavideo

    stampavideo Greenhorn

    Messages:
    94
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #8
    This is due to PNG format having gamma correction informations baked in. If you are interested in what gamma is google "gamma correction png" but you'll get tons of math which you are probably not interested in.

    You can use the free TweakPNG tool to erase the Gamma chunk (id: gAMA) from your PNGs, then images will be displayed exactly as you expect them to regardless of operating system or browser. To make a long story short, this is the same reason why Mac and PC images sometimes appear brighter or darker, and some quicktime video files seem washed out after exporting.
     
    stampavideo, Oct 26, 2009 IP
  9. vivideye.ca

    vivideye.ca Active Member

    Messages:
    397
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    70
    #9
    Thanks for the tip. learning something new everyday on this forum.
     
    vivideye.ca, Oct 26, 2009 IP
  10. ddzc

    ddzc Peon

    Messages:
    487
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    wow, that actually worked perfectly! Thanks a lot!
     
    ddzc, Oct 26, 2009 IP
  11. james.parker

    james.parker Peon

    Messages:
    631
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    HI

    If you make it in different colors and which color is best, you can choose it.
     
    james.parker, Nov 1, 2009 IP
  12. dabzo

    dabzo Peon

    Messages:
    188
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    just a fact of life. All you can do is make it a bit brighter, but not oo bright for ff... Or create a separate css doc for each browser.
     
    dabzo, Nov 2, 2009 IP
  13. ibrahimzcl

    ibrahimzcl Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    damn ie...
     
    ibrahimzcl, Nov 2, 2009 IP
  14. stampavideo

    stampavideo Greenhorn

    Messages:
    94
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #14
    Yes, it's an annoying extra step but it works. Glad it was useful!
     
    stampavideo, Nov 4, 2009 IP