commadot.com

IE7 PNG Problem

I just ran into a problem that is a real pain in the ass with Internet Explorer 7.

Start with a blank page with a patterned background.  Put an absolutely positioned 24-bit transparent PNG file (like a fade) on the page and make the width=100%.

You can see an example of this on sparkt.com at the top.  In IE7, SOMETIMES it will add a strange reverse fade on the image all the way on the right.  SOMETIMES it will just stretch all the way to the right.  I have been doing this sort of thing for a long time and have never seen it happen.  The versions of the browser are identical.  Both running on Vista.  I can’t for the life of me figure out any significant difference in the systems.

Internet Explorer 6 renders this just fine.  It is only in IE7.

Load the page and look to the right.  Does the fade go all the way to the right or trail off about a centimeter from the end?  Bizarre.  Microsoft is killing me.  They should give up on the browser and just tell people to use Firefox.  Why bother?  Why make a browser?  Do they really have anything to gain there?

And while I am railing on microsoft…why the hell don’t they make a Firebug clone for IE?  Some of us have to live in the mess Microsoft made and I hate it.

Comments

16 responses to “IE7 PNG Problem”

  1. Chris Wilson [MSFT] Avatar
    Chris Wilson [MSFT]

    Glen, you should give this feedback to our feedback system: http://connect.microsoft.com/ie. As for Firebug clone, perhaps you haven’t seen the Developer Toolbar in IE7, or (far better) our Developer Tools in IE8?

    Reply
  2. Glen Lipka Avatar
    Glen Lipka

    @Chris: Thanks for posting. The link you posted doesn’t work. [Page Not Found. The content that you requested cannot be found or you do not have permission to view it. ]

    Also regarding the IE7 Developer toolbar. That’s a joke right? It has like 1/10 of the functionality. Maybe you are thinking of the Firefox web developer toolbar? IE7 toolbar is closer to that. I haven’t seen the IE8 toolbar yet. I read it was better, but I will believe it when I see it.

    I can elaborate if anyone is interested in specifically what I need as a HTML/CSS developer. I think John Resig had a good article on the programmer side of things.
    http://ejohn.org/blog/powering-a-web-revolution/

    Reply
  3. Chris Wilson [MSFT] Avatar
    Chris Wilson [MSFT]

    Hmm, sorry about that – forgot that I was already joined to the connect system. Check out the blog post we did on feedback mechanisms: http://blogs.msdn.com/ie/archive/2008/03/05/ie8-beta-feedback.aspx.

    On the IE7 Dev Toolbar – certainly it wasn’t Firebug. It did have a more style-oriented set of tools. IE8’s dev tools are a lot more powerful for debugging: http://blogs.msdn.com/ie/archive/2008/03/07/improved-productivity-through-internet-explorer-8-developer-tools.aspx. I think you’ll be pleasantly surprised, by both what’s in beta 1 and what’s coming in beta 2. And, by the way, it works in emulate IE7 mode, which might give you some insights into IE7 problems.

    Reply
  4. Glen Lipka Avatar
    Glen Lipka

    Ill check out the feedback loop. I certainly appreciate better tools on the way, but I am sure you understand my impatience.

    Any possibility of having an “emulate IE6 mode” too? If you had an “emulate browser…” mode where you could pick ANY browser, now THAT would be awesome.

    Here is my dream: Developers could put what browser to emulate at the top of the html. Then the browsers would render the page using that renderer. That would mean I would never have to upgrade pages and I could test is just one browser!

    That is my dream come true. If only there was a browser maker out there with the resources and the skills to make it a reality. Wink wink, nudge nudge.

    Reply
  5. Chris Wilson [MSFT] Avatar
    Chris Wilson [MSFT]

    In fact, this isn’t far off what we’re doing with IE8 – with the X-UA-Compatibility header and META tag. Check out http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx.

    We aren’t extending back to IE6, though, because we already tromped on that behavior with IE7. 🙁

    Reply
  6. Glen Lipka Avatar
    Glen Lipka

    That connect website is making my head spin. I clearly don’t have any permissions to give the feedback.

    I definitely appreciate the emulation capabilities you are describing. I am just extending it to ALL browsers. IE6, Firefox 2, 3, Opera, Safari, etc etc. Everything. That is the dream.

    However, for you guys, I definetely see the point. You do this for ie7. That way all your corporate intranet customers who HATE change can put one line at the top and leave the application as-is. Very smart.

    This leaves you guys the ability to FIX IE8 and go with standards without risking “breaking the internet” as you guys always point out.

    My only problem is one of impatience. IE6 still is the dominant browser. IE7 is close behind. IE8 will takes YEARS to be dominant. When will IE6 stop pestering me? IE7 is no prized cow either.

    Anyway, I get where you are coming from. I am just impatient. And of course, Ill complain when you launch early and its got bugs. 🙂 I don’t envy your job Chris.

    Reply
  7. Robert Avatar
    Robert

    @Glen

    Have you seen IETester?
    http://www.my-debugbar.com/wiki/IETester/HomePage

    It has IE 5.5, IE6, IE7 and IE8 beta 1 all in a single application.

    Why this company can do it and not Microsoft, I’m not sure. Maybe Microsoft is concerned about download size. Of course they could just make it an optional install.
    Maybe Microsoft’s IE team doesn’t have the needed resources to devote time to this (maybe a lower priority).
    Clearly Microsoft as a company has been dragged kicking and screaming into the web world. It’s funny how they are the ones that started the whole thing in the first place with their early DHTML work in IE. I agree that being on the IE team inside of Microsoft must be a very frustrating experience 🙂

    Reply
  8. mdmadph Avatar
    mdmadph

    Greg, I feel your pain, but wishing that “developers could put what browser to emulate at the top of the html” isn’t the answer — the answer is browser makers not needlessly inflating their rendering engines with proprietary code so that everything will render the same, no matter what browser is used.

    I’m really, really not going to beat a dead horse here, but Microsoft is horrible for this. (Not that Mozilla and Webkit aren’t guilty of it, as well.)

    Reply
  9. Glen Lipka Avatar
    Glen Lipka

    If I had a nickel for every time someone called me Greg. Last week, in an email someone typed my name as Glep. Glep?? Really?

    However, I think browser makers have proven themselves to be incapable of doing what you suggest. We could all switch to flash, but I don’t think that would work either.

    Reply
  10. mdmadph Avatar
    mdmadph

    …ha! Sorry about that. I have a four-letter name, myself, and I’m always being called half-a-dozen variations of it, as well, so I really do feel your pain!

    Reply
  11. DotSwoof Avatar
    DotSwoof

    Were you ever able to fix that fading png problem in IE7? I am having the same problem even though I am not running Vista. I’m just concerned that people viewing my site will see Explorer’s mess up and blame it on my site.

    Reply
  12. Glen Lipka Avatar
    Glen Lipka

    Basically, I had to stop stretching PNG files. Instead, I make a GIANT PNG file and make it a background image. IE6 doesn’t have a fix for repeat-y or repeat-x of a transparent background. However, the giant width/height wasn’t so bad from a file size standpoint and it worked better.

    Message to Microsoft: Isn’t there SOMETHING you can do, like a secret code in an HTC file or something ro make background-repeat work for a transparent 24-bit PNG in IE6?

    Reply
  13. DotSwoof Avatar
    DotSwoof

    Thanks a lot. Although I’m just going to leave it. After posting on a few forums I found out it doesn’t happen to all IE7 users for some reason. So I’m just going to ignore it and tell all my visitors to get Firefox.

    Reply
  14. Ryan Avatar
    Ryan

    The emulation idea is in fact considered a bad one by most web developers.

    eg. If you set to IE7 compatible, what happens if a feature of IE7 is found to be insecure, like todays cross domain exploits. The bug would need patched, but that would break backwards compatability, so what do you do? It doesnt work.

    Secondly will IE15 be including IE7, IE8, IE9, IE10……….. That will be a lot of work, a lot to go wrong and a big mess.

    See here for more information:
    http://www.alistapart.com/comments/beyonddoctype/

    The answer I think is to follow standards, not create new proprietary solutions which will only cause further headaches later.

    Thanks,
    Ryan

    Reply
  15. Glen Lipka Avatar
    Glen Lipka

    @Ryan: Although, I agree logically, I still feel annoyed emotionally.

    The web is a funny thing. I made http://kapgroup.com almost 10 years ago. It looks the same as the day I made it. Check out the HTML. That is Netscape 2.0 compatible.

    I do follow standards, but I hate slowing down progress.

    Reply
  16. Chris Wilson Avatar
    Chris Wilson

    @Ryan – I don’t think it’s true that most web developers consider having compat modes to fall back on when you request them is a bad idea. At the time that article was written, the default was going to be IE7 mode – which most commenters disagreed with, which is why we changed that design.

    As for security bugs, yes, security will always trump compatibility. That’s a pretty narrow set of compat problems, though.

    Reply

Leave a Reply to mdmadphCancel reply