aka Freemona

Internet Explorer 6 Compatibility

This article deals with compatibility issues with Internet Explorer 6 (IE6) and ways to work around them or apply patch fixes to alleviate the limited capabilities of that browser. IE6 usage among users is dropping, but there is still a significant percentage of visitors that may view your design using IE6 (varying greatly depending on the site target audience).



Transparent 24-bit PNG Images

One of the main shortcomings of the IE6 browser is its inability to display alpha-channel transparent 24-bit PNG images. These images are used primarily to achieve compositing effects such as  displaying a partially transparent overlay, create smooth rounded corners independent from their background, smooth shadows, etc. IE6 displays these images with a pale blue backdrop covering the entire bounding box of the image, preventing any of the background to shine through, in essence defeating the purpose of using PNG usage.


Below you can see an example of the default appearance of IE6-rendered PNG images - here the panel images are PNGs with the shadow being transparent to combine with the striped background image.




We have implemented inside SiteKreator a custom fix* for this problem. By adding a two line HTML Snippet to the web site that uses your design featuring transparent PNG images (add the HTML Snippet inside a shared content area so that it's applied on all pages) you can tell IE6 to apply a filter to the images and display them properly. Here is the snippet


<style> img, div { behavior: url(/Shared/Html/iepngfix.html) } </style>
<script type="text/javascript" src="http://img.nccdn.net/Shared/Scripts/iepngfix_tilebg.js"></script>


And here is the resulting appearance in IE6 with the fix applied.




Note that for the fix to work properly, the container or element to which you have applied the PNG image as a background must not feature any paddings. If paddings are present, IE6 will push the background image away from the edges of the container with the amount of pixels specified as paddings.


To overcome this limitation, the solution is to add a nested container inside the one to which you apply your PNG as a background image and apply the paddings to this nested container.


* Original PNG Fix source http://www.twinhelix.com/css/iepngfix/



position: fixed

Another compatibility issue for IE6 is dealing with containers or elements which are set to position: fixed (similar to position: absolute but the element is positioned in relation to the browser edges as opposed to the page edges and so stays static when the page content is scrolled up / down or sideways). The only way to overcome this problem is to write a JavaScript which would do the positioning of the element dynamically on-browser-resize. You can set this script to be executed only for IE6 and depend on position: fixed for other browsers.