Using "IE Root"

Fixing IE bugs without ugly hacks

Common CSS Hacks

The Star Hack


	*#content p {
		margin: 16px; /* ie only */
	}
	

	#content p {
		margin: 12px;
		*margin: 16px; /* ie only */
	}

Common CSS Hacks

The Underscore Hack


	#content p {
		_margin: 16px; /* ie6 only */
	}

Common CSS Hacks

Direct Child Selector


	#content > p {
		margin: 16px; /* hides from ie6 */
	}

Common CSS Hacks

What a mess...


	*#content p { 
		padding: 2px; /* ie6 and ie7 */
		_margin: 16px; /* ie6 only */
		*margin: 18px; /* ie7 only */
	}
	#content > p {
		margin: 14px;
		*padding: 0px; /* ie7 only / not ie6 */
	}

Isolating The Hacks

Conditional Comments (IE Only)


	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="../iefixes.css" />
	<![endif]-->

Isolating The Hacks

The Problem:

  • Extra server request
    • About 75% of users browse with IE6 & IE7
    • 3 out of 4 visitors make an extra call to the server?

Introducing "IE Root"

  1. Create a conditional comment immediately following the BODY opening tag

    
		<body>
		<!--[if IE6]>
		
		<![endif]-->

  2. Rather than using a CSS link, use a DIV with an ID

    
		<body>
		<!--[if IE6]>
		<div id="ie6">
		<![endif]-->

  3. Don't forget to close the conditional DIV!

    
		<!--[if IE6]>
		</div>
		<![endif]-->
		</body>

Introducing "IE Root"

You can now target IE6 with plain, valid CSS!


	p {margin: 10px;} /* global */
	#ie6 p {margin: 12px;} /* ie6 only */

Extending the Technique

<body>
<!--[if gte IE 7]>
<div id="ie7">
<![endif]-->
	<!--[if IE 6]>
	<div id="ie6">
	<![endif]-->
	
<p>content</p>
	
<!--[if IE]>
</div>
<![endif]-->
</body>

p {margin: 10px;}
#ie6 p {margin: 12px;}
#ie7 p {margin: 16px;}