Solving the IE7 problem

IE7 was released with significantly better standards support—a lot was fixed, and we thank the developers for that. But support for everything that browsers like Firefox, Safari, and Opera have provided for years didn’t materialize—which makes a few things a little tricky. This easy-clearing method is one of them.

IE7 fixed the height: 1%; bug. Where IE6 would expand a container to shrink wrap its contents—even when that exceeded a dimension specified with CSS—IE7 will now correctly honor that dimension. This is now proper behavior, so we can’t blame the IE7 developers for fixing this. And like other, more standards-aware browsers, IE7 also now ignores declarations that begin with the * html selector, which is also proper behavior.

The problem, though, is that IE7 still doesn’t support the :after pseudo-element. And so by fixing the height: 1% bug and not supporting :after, the IE7 developers ensured that we’re stuck in terms of getting the browser to autoclear floats using one of these methods.

To address this issue, enter this bit of code:

*:first-child+html #sweden dl { min-height: 1px; }

Setting a min-height on a container in IE7 also expands a container in the same fashion that adding a height in IE6 does. That wacky-looking selector that precedes #sweden dl (*:first-child+html) is the piece that targets IE7 and IE7 only.

Hooray! Now we have the three pieces in place that will self-clear things in the most popular browsers. Let’s take a look at all of them together in one place:

#sweden dl:after { /* for browsers that support :after */
							content: ".";
							display: block;
							height: 0;
							clear: both;
							visibility: hidden;
							}
							* html #sweden dl { height: 1% } /* for IE5+6 */
							*:first-child+html #sweden dl { min-height: 1px; } /* for
							IE7 */
						

Again, ideally the patches that target IE specifically would be placed in a separate style sheet, kept separate so as to avoid tainting the clean code (more about that in Chapter 9). But with these three declarations, we have a solid, reliable way of self-clearing floats. The code may seem a bit verbose at first, but once you start using these rules consistently, you’ll find that they become indispensable for creating flexibility without concern that your floats will fall apart in the future.