About a month ago, we reached one of those crossroads in the development of our (coming very soon) content management solution. Our development process is typically to develop a perfect standards-compliant site and then reverse-engineer a working Internet Explorer copy out of that–usually through painstaking pixel-by-pixel corrections of obscure bugs in IE-specific stylesheets, but also in rare cases where we had to make compromises with the design or markup of the page.
But IE stylesheets can only get you so far. When working with a public-facing website design you just need to get it right once: we make sure the structure is flexible and adaptable and forward-looking, but mainly we build to the best standards of the current day. But because development of our backend solution will be continuous (that’s a hint about a major feature, by the way), continuing to tie ourselves to IE6’s sundry limitations would be crippling down the road. Read more »
Tags: 37signals, ie6, internet explorer, livewhale, lwblog, whitewhale
Comments: None »
Internet Explorer 6 is a web development headache for many reasons, but its lack of support for PNG alpha transparency is one of the most grating. It’s more-or-less a given that any cutting-edge design (even a relatively minimalist one) is going to have a place where one layer shines through another, or a single transparent image should be matched to multiple background colors, or—most commonly—anti-aliased text is placed over a photo or texture.
Getting these PNGs to actually be transparent is no longer a major issue—we’ve used a few different approaches over the years, but settled on Angus Turnbull’s iepngfix.htc as the most straightforward drop-in solution out there. The way it works is just really smart.
But while building out some recent client projects, we just couldn’t get it to catch. We checked and double-checked the file paths, and re-exported the PNG images, and finally copied a working example from a live client site, but nothing seemed to do it. Because IE has no decent debugger, I removed the conditional comment to see what I could learn in Firebug.
It turns out that our staging server sends the .htc file as text/plain, while the working client version was serving text/x-component. Changing out server config to mimic this fixed the problem. Later, some Googling revealed that the release notes for the newest beta version address this (and even include a PHP solution that serves the file while sending the correct headers).
There are still a whole host of limitations: no repeating images, weird layering glitches that happen even in IE7, and really bizarre link clickability issues. But iepngfix gets far enough to solve 90% of the problem.
Tags: code, CSS, development, ie6, internet explorer, png
Comments: 5 comments »