How To Fix Internet Explorer Javascript, PNG Transparency, and Other CSS Problems In One Simple Step

We’ve all been there – project is nearing completion, your site looks great in webkit and firefox, and you want to get paid, but your curmudgeonly client cares what his site looks like in IE6 because his clients are all civil servants, and the government only updates their computers once a decade. Or maybe you just run a publishing site like mine, at SalaciousSound.com, and would prefer not to ignore the largest browser segment in the market.

Either way, Internet Explorer can be a pain in the butt, but only if you let it!

I just came across a solution in the google code repository called ie7-js, which

is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.

Pretty sweet. I just tried it out, and it worked like a charm.

Option 1 – If all your png images with transparency end in “-trans.png”

Only one quick step is required, since the people hosting the code are cool with direct linking to the js file (which helps load time a lot, especially in the case of jquery). Copy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

Option 2 – No consistency in filenaming of png images with transparencyCopy and paste this code, and you’re good to go:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js">
IE7_PNG_SUFFIX=".png";
</script>
<![endif]-->