Browser Compatibility

IE6 PNG Fix

Why does your logo or image display with a grey background in IE6? Well for starters IE6 is a terrible browser and should be avoided at all costs. However, the real reason is that IE6 can simply not display the transparency by default. For this we must use a simple workaround called PNG Fix.

In order to properly display these transparent PNG images in IE6 you must follow the following steps.

  1. Download the iepngfix file and upload it to your website. If you are following our structural recommendations, upload it to your javascript folder.
  2. Add a class to the element in your HTML.
  3. In your CSS file, include 'behavior: url(/javascript/iepngfix.htc);' for that element.

Example:

HTML: <image src="yourimage.png" width="150" height="100" alt="image title" class="iepngfix" />
CSS: .iepngfix { behavior: url(/javascript/iepngfix.htc); }

Box Model Hack

If you can't seem to figure out why your element's width varies from IE6 to other browsers, one again blame IE6. Perhaps we should call this page 'Making your website work in IE6'? The reason for this inconsistency is because IE6 renders padding as extra width on your elements. Fortunetly there is a way around this as well by using a method called the box model hack.

The box model hack is one simple line of code that you must add to your css: 'width/**/:/**/ 999px;'. The hardest part of this is doing the math. You must subtract the width of the padding from the total width.

Example:

HTML: <div class="box">a box with text</div>
CSS: .box { width: 100px; padding: 0 10px 0 10px; width/**/:/**/ 80px; }
(100px - 20px = 80px)