Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    Using PNG images with transparency as background images

    I have an issue with IE6 vs. FF and a background image that is a PNG file with transparency in it. I understand that IE6 does not do alpha channel transparency, but this is a full transparent section in the graphic.

    Any help would be appreciated... I've attached screenshots of the FF and IE6 results as well as the background graphic. The one with orange coloring is displaying properly in FF; the one in gray is IE6. If it would help to see an example I'll link to one.
    Attached Thumbnails Attached Thumbnails Using PNG images with transparency as background images-ie_bg.jpg   Using PNG images with transparency as background images-ff_bg.jpg  
    Attached Images Attached Images  

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    e.g.

    yourmain.css:
    Code:
    selector { // for compliant browsers
    	background: url(path/to/image.png);
    }
    iewin5-6.css:
    Code:
    selector {
    	background: none;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale");
    }
    markup…
    Code:
    <style type="text/css">
    
    	@import url(yourmain.css);
    
    </style>
    
    <!--[if lt IE 7]>
    <style type="text/css">
    
    	@import url(iewin5-6.css);
    
    </style>
    <![endif]-->
    More info on conditional comments.

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Thanks for the info... I can't stand bending over backwards for a poorly written and intentionally non-compliant browser so I'll have to figure out another way to do it.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    There are js 'fixes' which automate the process to some degree.

    e.g.
    http://homepage.ntlworld.com/bobosola/
    http://allinthehead.com/retro/69/sleight-of-hand
    http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
    http://dean.edwards.name/IE7/

    However, I tend to avoid js-based fixes for this problem. (I don't see the wisdom of making the correction of a CSS problem unnecessarily dependent upon an otherwise unrelated technology - namely js.)

    Additionally, I tend to use PNG24 images so sparingly, and even then only as background images (I've yet to encounter a case where a content-carrying image needs alpha transparency), that manually implementing the workarounds in the CSS of a conditionally commented IE stylesheet only takes a minute or two. For the sake of that extra minute or two's work, I can avoid using a fix which presents an additional potential point of failure (js dependence).

    I'll often institute one or two conditional commented stylesheets in all projects by default, even if the stylesheets themselves are empty at launch. Just in case I need to throw in some IE version-specific CSS later on in the project.
    Last edited by Bill Posters; 07-03-2007 at 09:11 AM.

  • #5
    New Coder
    Join Date
    Jan 2006
    Location
    UK (Britain)
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,

    Download TweakPNG: http://entropymine.com/jason/tweakpng/

    Open the file, drag a .png file on to the programs window... double click gamma... and enter 0... then save (ctrl + s).

    This will totally stop the transparency problem in IE. IE will never fix this problem because technically it is not a problem. It is how PNG images are supposed to be displayed however most browsers ignore it for obvious reasons. Personally i think IE should ignore the gamma as well so they fit with other colors.

    Kind regards,
    Scott

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by VBAssassin View Post
    Hello,

    Download TweakPNG: http://entropymine.com/jason/tweakpng/

    Open the file, drag a .png file on to the programs window... double click gamma... and enter 0... then save (ctrl + s).

    This will totally stop the transparency problem in IE. IE will never fix this problem because technically it is not a problem. It is how PNG images are supposed to be displayed however most browsers ignore it for obvious reasons. Personally i think IE should ignore the gamma as well so they fit with other colors.

    Kind regards,
    Scott
    Correction IE6 will never fix this problem, IE7 has. And yes it is a problem with IE6. Just like gifs, pngs can be transparent as well but IE6 as stated doesn't understand alpha transparency. Most other browsers do. You say "It is how PNG images are supposed to be displayed", can you prove this or are you just saying this because its your opinion?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jan 2006
    Location
    UK (Britain)
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Correction IE6 will never fix this problem, IE7 has. And yes it is a problem with IE6. Just like gifs, pngs can be transparent as well but IE6 as stated doesn't understand alpha transparency. Most other browsers do. You say "It is how PNG images are supposed to be displayed", can you prove this or are you just saying this because its your opinion?
    I don't mean the transparency... yes there were problems with transparency in IE6 which have been fixed in IE7... however i am on about the gamma which is also a common problem amongst using PNG's on the web with IE... and how IE actually uses the gamma while other browsers ignore it... Microsoft have no intention on fixing the gamma problem because it's not actually a problem... in fact it is the correct way of displaying PNG's however in web sites its better not to use gamma.

    Kind regards,
    Scott

    Edit: Here is your proof: http://www.sitepoint.com/newsletter/...id=3&issue=153
    Last edited by VBAssassin; 07-03-2007 at 12:22 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    VBAssassin, when you stated "IE will never fix this problem because technically it is not a problem", others reasonably assumed you were talking about the problem under discussion - that of the failing transparency, not the gamma issue.
    Perhaps you could have made it clearer that you weren't actually addressing the OP's problem with your post.

    It's not the accuracy of your statement which is in doubt; it's the relevance.

  • #9
    New Coder
    Join Date
    Jan 2006
    Location
    UK (Britain)
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lol fair enough... my mistake on that.


  •  

    Posting Permissions

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