Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

Clearing floats without structural markup in IE7

The one where Malarkey sits with the Internet Explorer team at MIX06 to ask for a recommended answer to a common question.

Recent conversations over at 456 Berea Street on the subject of whether a new solution for clearing floats without structural markup is needed, required an answer. So at MIX06 I sat down with seven's developers to find a recommended answer to the question.

Roger asked,

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.

Source

Sitting in the seven compatability lab with Roger's post to hand, here are some answers to the questions raised by Roger and some of his readers.

Clearing floats without structural markup

seven now correctly implements the W3C specification by collapsing containers that include floated children. However, as seven has not implemented generated content, the so called easy clearing method is not an option for clearing floats in seven.

As mentioned by Philippe and now tested in the MIX06 compatibility lab in seven for Windows XP and Windows Vista, the overflow method first highlighted by Anne Van Kesteren is an appropriate solution for all versions of Internet Explorer including seven

#content { overflow : hidden; _height : 1%; }

The height property is one solution for triggering 'hasLayout' in Internet Explorer. The Internet Explorer team also suggest that using the proprietary

zoom : 1;

will also trigger hasLayout in all versions of Internet Explorer from version four onwards. This zoom property must be written into a separate style-sheet using filters or conditional comments to retain CSS validity.

Roger's readers questions answered

Also, no-one has mentioned how long IE6 will be around?

I asked this very question at MIX06 and was told that as IE6 shipped with Windows XP, that Microsoft will continue to support it for the foreseeable future. Support for IE5.5 has already been withdrawn (as it shipped with the now defunct Window Millennium Edition) but strangely IE5 will continue to be supported as it shipped with Windows 2000.

What is the expected uptake rate of IE7, will it be bundled in Vista (Jan 07), will it be pushed to XP with Windows Updates? Will it be a it's new, get it if you want it download?

Microsoft have not yet decided on a release date for seven. It will be bundled with Vista and prior to Windows Vista's release will be available for Windows XP via a promoted download. They are undecided yet as to how Windows Update will be involved in pushing the adoption of seven, however they listened to mine and others comments at MIX that it should be made a critical update. Microsoft are very keen to see the widest and earliest adoption of seven.

What does the magical hasLayout tag do? Never heard of it.

Markus Mielke has written an explanation of this in a HasLayout Overview on MSDN.

Layout complete (?)

Microsoft have stated that seven is now layout complete and that CSS support will not be changed further prior to the commercial release, however several CSS bugs were brought to light even during MIX06. As the release is still a way off, I urge Microsoft to fix these important important issues before then.

Replies

  1. #1 On March 24, 2006 04:37 PM Dave Scriven said:

    My main concern is that MS may be only allowing genuine Windows installs to install IE7 like the beta.

    I don't know if this willbe the case or not but I do know there are a lot of people out there who didn't pay the ’250 for WinXP. Possibly the majority of people out there who didn't buy a packaged PC?

    If they can't install it surely we're in a bad spot?

  2. #2 On March 24, 2006 04:43 PM Dave Scriven said:

    Sorry that was in relation to the "What is the expected uptake rate of IE7, will it be bundled in Vista (Jan 07), will it be pushed to XP with Windows Updates? Will it be a it's new, get it if you want it download?" question you mentioned - nothing to do with clearing!

    I realised it seemed a little off topic :-/

  3. #3 On March 24, 2006 05:15 PM Dan Cederholm said:

    Thanks for the info, Andy. It's amazing we're getting this kind of insight.

    FWIW, a solution using display: inline-block; has apparently been discovered as well (via an update on Roger's post). If true, it may be preferable over a potential chopping of extra-wide content when using overflow: hidden;. Good to know we have some options.

  4. #4 On March 24, 2006 05:33 PM Edward said:

    Ahh, fantastic! It truly is remarkable how much good work and faith is going into this effort.

    The fact that we are even having all this time to test our websites is amazing. I really hope that they take the time to finish things up a bit more. While I appreciate the extra window of opportunity to test, I would rather have a better product and less testing time than a just-about-there product with more testing time.

  5. #5 On March 24, 2006 06:19 PM Ara Pehlivanian said:

    I've got to say, it's refreshing to see such a willingness on Microsoft's part to be interact with the web development community. I am a little perturbed though that they've decided not to implement some of the more useful features of CSS2. Is it really THAT hard to be fully compliant with the W3C recommendation?

  6. #6 On March 24, 2006 06:41 PM Paul Sullivan said:

    My testing shows that in all cases where height: 1px was used to trigger IE6's shrink wrapping behaviour then min-height: 1px accomplishes the same thing in IE7. I cant think of any instances where you would want a shrink wrapping element to be less than 1px so there is no need to even hide it from Firefox et all.

  7. #7 On March 24, 2006 06:55 PM Malarkey said:

    @ Dave Scriven: My main concern is that MS may be only allowing genuine Windows installs to install IE7 like the beta.

    A good question to ask of the IE team.

    @ Ara Pehlivanian: I am a little perturbed though that they've decided not to implement some of the more useful features of CSS2. Is it really THAT hard to be fully compliant with the W3C recommendation?

    I think that viewed is shared almost universally, we all want to see full CSS2.1 support. However I think it's fair to say that yes, it has been hard for the IE team to balance all the things that they need to consider (Vista, the Trident engine, standards support etc.) They rightly chose to work on the areas that they thought mattered most to developers such as fixing common rendering bugs.

  8. #8 On March 24, 2006 07:28 PM Roger Johansson said:

    Thanks for taking the time to find the answer to those questions, Andy!

    As Dan points out, I updated the post after finding out via the comments that a combination of display:inline-block and display:block will do the trick. I also prefer that solution to using overflow:hidden.

  9. #9 On March 25, 2006 06:03 PM Juani said:

    Anyone knows if IE7 is going to support !important?

  10. #10 On March 26, 2006 08:40 PM Ted Drake said:

    The IE7 download will test for a legit copy of xp on your computer. That's the word that I have. So, if you have a non-legit version, you'll have to wait for a cracked version of IE7 to work with.

  11. #11 On March 26, 2006 08:45 PM Vasil Dinkov said:

    The Internet Explorer team also suggest that using the proprietary

    zoom : 1;

    will also trigger hasLayout in all versions of Internet Explorer from version four onwards.

    Not true. Only in IE 6+.

  12. #12 On March 26, 2006 10:59 PM Vasil Dinkov said:

    Actually in IE5.5+ but definitely not in 4+.

  13. #13 On March 27, 2006 11:43 AM Matthew Buchanan said:

    #content { overflow : hidden; _height : 1%; }

    Just a small point, but shouldn't the example code read overflow: auto as per Anne's example?

  14. #14 On March 27, 2006 11:46 AM Matthew Buchanan said:


    Ah, I see both in fact have the same result. Overflow: auto seems to make more sense to me than overflow: hidden though.

  15. #15 On March 27, 2006 08:32 PM David said:

    I haven't kept totally up-to-date of how the PIE mathod is or is not going to work with IE7 but I have heard there are problems. I have downloaded the beta release about a week ago and checked most of the sites where I use the PIE method and havent noticed any problems.
    Is there something I'm missing here or not aware of?

    Thanks!
    David

  16. #16 On March 28, 2006 02:40 AM Gary Turner said:

    The question I have not seen definitively answered is whether having layout is sufficient to cause an element to enclose its float descendent. If it is, we're stuck with the same problem as always—a dimensioned box, or any box with hasLayout==true, will not allow a float, or any other descendent to overflow.

    In fact, none of the things that trigger hasLayout,
    width,
    height,
    float,
    zoom,
    inline-block,
    absolute position,
    writing-mode, and now
    min- max-
    should cause a float descendent to be enclosed, nor should it be required as an adjunct to valid means, overflow other than visible or display table or table-cell.

    cheers,

    gary