Zoffix CSS - IE Hacks

IE Box Model Hack

Affected browsers: All versions of Internet Explorer on Windows

 
 
Probably the most acclaimed IE bug is the Box Model Bug. The CSS box model affects pretty much every block element, and the most used browser in the world, for some reason, chose to interpret it wrong (read the CSS Specification to learn how it is supposed to work).
Basically, when you set the width to the element you specify the width of the content. When you add paddings, borders, and margins, they get added to that width. This is the way every sane browser does it, but IE is not a sane browser. For IE 5, IE 5.5 and IE 6 (in quirks mode) the width specifies the width of the content, padding and the border, only the margins are outsite that width. This is the interpretation that I have seen in many sources. However after extensive testing in IE 5, IE 5.5, IE 6 and IE 7, I've came to the conclusion that this is not a correct interpretation of the IE Box Model Bug. For example, let's take a look at a div with {width: 100px; height: 100px; padding: 100px; border: 100px solid #000;} in a page without a DOCTYPE declaration. FireFox renders the div as being 500px by 500px (the dimentions of the outer border edge), which is correct. Considering the explanation above, IE should render this box as 100px by 100px with 100px border and 100px padding inside, it's impossible and IE renders the box as 470px by 420px. Test number two, this time the div is styled with {width: 100px; height: 100px; padding: 10px; border: 10px solid #000;}. FireFox renders the div as 120px by 120px, IE, (adhering to the explanation above) should render the box as 100px by 100px with the 10px border and 10px padding inside of the div, but all the versions of IE rendered the box as 110px by 100px. I am not too concerned about the interpretation of the IE Box Model Bug, what matters to me is that solution is in fact workable.
The problem is that if you don't specify any padding or borders the element will render correctly in IE, therefore there isn't any global solution to the problem and each element should be handled separately
To fix IE 6 and IE 7 you can simply trigger standards compliant mode by including a DOCTYPE declaration. You can refer to http://www.ericmeyeroncss.com/bonus/render-mode.html to see what DOCTYPE triggers which mode, or run javascript:alert(document.compatMode) in the location bar in the browser to see what mode the browser is in. For IE 5, IE 5.5 and IE 6 in quirks mode solution gets more complicated.
The following solution was created by Edwardson Tan and is known as Tan Hack. Let's consider an example code: 
.box 
{
  width: 400px;
  height: 200px;
  padding: 5px;
  border: 2px solid #000;
  margin: 5px;
}
 
The solution would be to include the following code after the previous one: 
* html .box 
{
  width: 414px; /* width + padding on both sides + border on both sides */
  height: 214px; /* height + padding on both sides + border on both sides */
}
 
All sane browsers will consider <html> the outermost element and will ignore * html .box selector while IE won't and render the content properly. However there is a complication with this method.
IE 6 in standards compliant mode applies the Tan Hack, while IE 7 does not. Also the hack is not needed in IE 6 and IE 7 in standards compliant modes. A much better solution would be to use a conditional comment to apply the hack. Refering to the example above, instead of applying the hack in the CSS file we will apply it in the markup in the following fashion: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>This is just an example</title>
		<link rel="stylesheet" type="text/css" href="allof.css">
		
		<!--[if lt IE 6]>
			<style type="text/css">
				.box 
				{
					width: 414px;
					height: 214px;
				}
			</style>
		<![endif]-->
		
	</head>
<body>
<div class="box">This is just an example</div>
</body>
</html>
 
If for some reason you need to use quirks mode simply change <!--[if lt IE 6]> to <!--[if IE]>
Suggested reading:
CSS Box Model
CSS Margin Property Specification
CSS Padding Property Specification
IE Conditional Comments
That is all! Happy fixing =).