As I was designing this blog, I ran into a problem. I wanted the site to have a flexible layout no matter how large the window size. The header image was part of the background graphic, so as the content of the site centered itself automatically, the header was always stuck on the top left of the window. The solution was then to make the header a separate image that “floated” above the background, and centered itself with the rest of the site’s content.
This presented another obstacle, as I soon realized that a simple jpg image wouldn’t suffice since it would cover the background pattern, due to its lack of transparency support. A gif image would also not work since it only supports binary transparency, making my graphic a pixelated yet transparent mess. The only viable image format would be png.
This is where my headaches began. The good folks at Microsoft fubar’d png transparency support in older versions of their ubiquitous Internet Explorer (versions 5.5 and 6.0). Thus began my 2 day journey into finding a hack that would allow me to display png’s with transparency.
I tried a javascript hack but that proved unreliable since some people disable javascript on their browsers.
I tried a Wordpress Plugin, but that did absolutely nothing to my header images.
Then I experimented with a CSS hack which seemed really promising and clean. For some reason that didn’t work at all in Wordpress, although I’m not sure why.
Then, finally I stumbled on a PHP solution which would be perfect since it was server-side, didn’t rely on javascript, and most important… IT WORKED!
It renders perfectly in IE 5.5, 6.0, 7.0 and all other modern browser like Firefox and Safari. There’s no workaround for IE 5.1, but considering that probably less than 1% of people use that antiquated browser, I’m not too worried about it.
