Fix CSS positioning and floats in IE

Published Feb 20, 2009

I run into CSS position problems with IE6 every so often when using elements that float, or with position:absolute inside a position:relative parent. Not so often that I immediately recall how to fix it, of course, and each time the problem crops up it's just different enough from last time to appear as a separate and unrelated problem. Here's hoping that writing it down will make it stick. And of course, I get some catharsis in pointing a hysterical finger at that Great Satan behind all the problems, IE6 itself, which Norway has declared war on. I'm cheering for Norway, but IE6 has all the staying power and good looks of the cockroach, so I rather suspect it will smugly survive the Norwegian Gambit and become the official browser of the post-nuclear-exchange web.

The best description I've ever read of IE's layout deficiencies are covered in depth in the "On having layout" article at http://www.satzansatz.de/cssd/onhavinglayout.html, but for those who are more interested in applying the fix quickly without whys and wherefores, here it is: force the element to have "layout" by applying a width or height. There is more than one way to do this, but the following fulfills my needs.

Part One - zoom:1

Zoom is an MS proprietary CSS property that forces layout to any element in IE5.5+. Hide zoom with conditional comments if you want the CSS to validate. Doesn't work on IE5.0.

   1: <!--[if lte IE 7]><style type="text/css">

   2:     .someElement { zoom:1; }

   3: </style><![endif]-->

4:

More info in the "On having layout" article on hack management: http://www.satzansatz.de/cssd/onhavinglayout.html#hackmanagement.

Part Two - Standards Mode

This should really be part one. Do not allow your website to render in quirks mode! Choose and use a valid doctype before designing your layout so that all browsers render your pages in standards mode. Else you really cannot count on this fix or any other. Unless of course you are designing your site to only be viewed in IE6 come the onset of that nuclear winter, in which case you will also want to consider the usability requirements of your primary end user: the cockroach.