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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer IE PNG Transparency Glitch

    Hi, I'm having an issue with transparent PNG images in Internet Explorer. It doesn't seem to occur in Firefox, Opera, Safari or Chrome.

    Check out this page in IE: http://www.principalinternational.co.uk/headlines/1242. The table backgrounds are transparent PNGs.

    Now hover over the "Share" button at the bottom. The PNGs suddenly become extremely transparent, and they remain like this, rendering the page quite unusable.

    This also occurred previously in another case: I had implemented some JavaScript that causes sub-menu items to fade in after a user clicks on one of the main menu items on the left. However, in IE, whenever a user clicks on one of the menu items when the fade-in menu is implemented, the PNGs become extremely transparent (just like with the "Share" button), so I have scrapped the feature for the time being.

    Does anyone know what causes these PNGs to become extremely transparent in IE? Feel free to look at and reference the source code.
    Last edited by pip4u; 06-18-2010 at 10:12 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    IE6 doesn't support alpha transparency of PNG images. You'd either need to add CSS/javascript fix (google for it) or use an 8 bit transparent PNG (see http://www.sitepoint.com/blogs/2007/...-clear-winner/)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's IE v7.0.5730.13IS, not v6. Nonetheless I'll try your suggestions.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Im not sure but I think this may help you it has a transparent png bit on it http://cavemonkey50.com/2005/12/the-...ie-hack-guide/

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    I've tried the following as recommended:

    http://christopherschmitt.com/2007/1...e6-and-beyond/

    http://cavemonkey50.com/2005/12/the-...ie-hack-guide/

    However, for whatever reason, IE 7 doesn't seem to be correctly reading ie.css, as the PNG images still seem to appear in IE and thereby the glitch still occurs.

    I would try using 8-bit PNGs, but I would only want IE to use them (I want the other browsers to use the current PNG images), and since IE doesn't seem to be reading ie.css atm, I don't think it will work.



    By the way, I want to clarify something from my first post as I realize I may not have been very clear: I was implying varying levels of semi-transparency, i.e. varying opacity.

    Let's say the normal case is an opacity of X (screenshot). However, in IE 7 a glitch occurs and seemingly causes the opacity to become Y, where Y < X (screenshot).

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Never mind, I think I've fixed the issue by using the solution at http://css-tricks.com/css-transparen...-all-broswers/ on GIFs, instead of using transparent PNGs. However, to anyone who reads this, please let me know if the semi-transparent backgrounds on the site don't seem to be working correctly on your browser.

  • #7
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    In short my friend, in all IE's upgrades, they still don't support transparent PNGs. You think they would have gotten it by now. So you have to hack your code to make it work. Always. And it seems they never will fix this, darn renegades!! ha ha
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming


  •  

    Tags for this Thread

    Posting Permissions

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