New clearing method needed for IE7?

With the release of the MIX06 build of Internet Explorer ("Internet Explorer Beta 2 Preview - released on March 20"), Microsoft has declared IE7 "layout complete". What that means is that no new CSS features will be added. This is what you get in the final IE7, though there may still be bug fixes.

So, now is the time to start testing. I haven't been able to test the latest IE7 myself, but it now supports the min-width, max-width, min-height, and max-height properties. Great! Less great is that according to Chris Wilson's answer to Peter Gasston's question, IE7 will not support the :before and :after pseudo-elements, and neither will it support the outline, content, and display:table properties.

Ouch. Missing support for :before, :after, and content may cause you problems, depending on the CSS you have used to take care of certain things.

Why is that? Well, IE used to have a box model bug which caused it to resize a box to contain any floated children it might have. The easy clearing method described at Position Is Everything uses that to create a very convenient way of clearing floats without having to add extra markup. Unless I'm wrong that method will not work in IE7, since the box model bug was fixed in the original IE7 Beta 2 Preview.

If that is the case, here's hoping that someone is able to come up with a markup-free way of clearing floats that works in IE7. Otherwise those of us who – like me – have been using the easy-clearing method will have to revisit every site that uses the trick and add clearing elements.

Speaking of clearing elements, I have never been able to come up with the CSS for a heightless clearing element that works consistently across browsers. And it looks like there will be an increased demand for those later this year.

Anyone out there sitting on a bulletproof markup and CSS clearing combo?

Update: The trick is to add display:inline-block and then display:block to the easyclearing rule:

  1. .clearfix:after {
  2. content:".";
  3. display:block;
  4. height:0;
  5. clear:both;
  6. visibility:hidden;
  7. }
  8. .clearfix {display:inline-block;}
  9. /* Hide from IE Mac \*/
  10. .clearfix {display:block;}
  11. /* End hide from IE Mac */

And to keep IE6 and earlier happy, use your favourite method (Conditional Comments or a CSS filter) to send them the following:

  1. .clearfix {height:1px;}

Update 2: Andy Clarke asked some of the IE developers about this and other questions raised in the comments here. Find the answers in Clearing floats without structural markup in IE7.

Posted on March 21, 2006 in CSS, Browsers