Remove IE6 Headche

I have seen several sites looks ugly in IE6 so what the option to make your site IE6 compatible. I read many articles and pick up some important tips.

The Box Model

#box {
   width: 100px;
   border: 2px solid black;
   padding: 10px;
}

IE 6 will calculate the width of the box to be 100px.
Modern browsers will calculate the width of the box to be 124px.
IE think more sense logically. IE6 can actually get it right if you are in Standard Compliant Mode.

Double Margin Bug

#box {
   float: right;
   margin-right: 20px;
}

IE 6 will double the 20px to 40px. If you really want to move the element from its parent element use padding.

No Min Width/Height

Setting of a Min Width and Min Height of element doesn’t make sense for IE6. It actually occurs on the footer and you are using background images. So what you will do for this? Here is the solution for this problem.

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Stepdown

Normally when we are using floating objects you can count on lining up untill they are break. IE6 create a link break effect after every floated element that will cause "Stepdown". The fix is to make the line-height of the parent element is set to 0 and element being floated are inline. Please read this article it amazing.

No Hover States

Modern browser can support hover effect on all the elements but in case of IE6 it only understand hover on pseudo class on anchor elements. It works when the anchor element have href=# otherwise it doesn't show hover effect. The solution is to use this link and this can be done by .htaccess.

Problem with Transparent PNG images

PNG transparency only support in modern browsers and greater IE6 versions.You can use this link to apply different PNG hacks for IE6.

Mostly these types of errors occurs in IE. Use these solutions so you site will visible perfect in all the browsers.