Magento and Internet Explorer 6

The last couple of days I had to deal with a strange problem on a new Magento site I am currently working on. The website is a rework of an older existing one, and unfortunately a lot of their customers still use Internet Explorer 6, so we can’t simply drop support for it on the new site. While the overall website looked good in IE6, I simply couldn’t get certain images to align properly, it seemed like they always stayed top left.

After a while of investigating using Microsoft’s IE Developer Toolbar, I noticed that it only applied to PNG’s that were used as background image. Also the elements to which the backgrounds belonged had CSS alpha filter rules applied, proprietary Microsoft stuff that is often used to make transparent PNG’s work in IE6.

After some investigating I noticed Magento includes a universal PNG transparency fix, to make transparent PNG’s work in Internet Explorer prior to version 7. The name of the file is ds-sleight.js and it is included in the page.xml layout file. Unfortunately the function seems to scan for all PNG graphics on the page, no matter if they include transparency or not, so it even affects non-transparent ones.

All these Javascript PNG fix libraries usually have one drawback: the background-position CSS property does not work anymore. The solution simply is either not to use PNG’s as CSS background if possible – unless you plan to align it top left – or edit page.xml and remove the corresponsing line. You could also use a different PNG fix, ie7-js always worked well for me and it doesn’t simply select all PNG images on the website. However for the ones that it fixes, background-position still won’t work.

For my project here, I simply wrote some additional CSS rules for IE6 that use alternative GIF and JPEG images, while all other browsers get the (sometimes higher quality) PNG’s.