IE PNG Hack

Ever try to use those wonderful transparent PNGs? Ever tear your hair out when after seeing how beautiful it looked in Firefox, Internet Explorer made an absolute mess of it? Then read on.

There are a great man hacks out there that use javascript to replace the png with a version that IE will display properly, but this becomes an issue if the user has javascript disabled on their browser. They will be back to an “ugly” version of your site.

Another potential problem that the javascript does not fix is if you are trying to use the *background-image *property in css. No transparency via Javascript in IE for that.

Focusing primarily on the latter issue (can be adapted to work for the former i.e. displaying a simple image) we can trick IE directly in our style sheet. Using the same method that the Javascript hack uses, we can turn this CSS

#leftMenu { background:url(../images/ui/left-menu.png); background-repeat: no-repeat; }

into

#leftMenu { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/images/ui/left-menu.png', sizingMethod='fixed'); background-repeat: no-repeat; }

Which suddenly fixed the problem in Internet Explorer, but removes the background from Firefox. Now what? Well, at this point you have a few options.

Make two versions of the style. Place the IE version before the standards compliant version, and give the standards compliant version an absolute path. So in our example if you have a DIV element named “leftMenu” inside the BODY tag that you want to style, then change the name of the standards compliant version to BODY > #leftMenu and IE will use the first one and ignore the second.

Or use something like:

<link xhref="assets/styles/main.css" mce_href="assets/styles/main.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link type="text/css" xhref="assets/styles/hack/ie.css" mce_href="assets/styles/hack/ie.css" rel="stylesheet" /> <![endif]-->

I hope this helps point some of you in the right direction.

UPDATE

If you find that after doing this the links in Internet explorer do not work, then in you stylesheet for the A tag, give it a position:relative and z-index:1 and your links should work again.