Tuesday, January 29, 2013

Modal box issue with IE6

This is most common and frustrating bug of IE6.
Code Problem
div#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.

Solution
Remember not to set padding and border for the object which has defined width. Always set width for the parent element and border and padding in the child element:
div#parentBox{
width: 100px;
}
#parentBox #box { 
   border: 2px solid black;
   padding: 10px;
}