I started writing this post few months ago, when I switched from desktop computer to notebook/laptop (whatever you wish to call it). I used notebooks from time to time, but this time I’m going full…monty would that be applicable in this case? My old desktop - AthlonXP 2500+, 1GB RAM, SATA RAID0 7200rpm disks, Radeon9800 - is packed and awaits new owner.
This was far from easy decision to make and I thought about it for a very long time. Eventually, I decided that much higher cost of buying powerful laptop vs powerful desktop will be justified with increased versatility and freedom of movement. The laptop was bought in UK and it proved to be a real eye-opener regarding business practice of some of the IT shops in London. A fishy practice.
…is one very shiny 13.3" with Core Duo 1.83GHz, 1GB of memory, 100GB SATA 5400 disk, all required wireless and Bluetooth, with the choice of two graphics options (Intel GMA950 and nVidia GeForce Go7400), all packed in premium carbon 1.69kg package. Sounds quite amazing and it mostly is. Sony really ticked most of the the right spots with the SZ line.
I’m not even sure this is a bug. IE5/Mac, IE6 and IE7 does it one way, Firefox, Opera, Safari another. Past experience on such things tells me this is a bug in IE, but it could also be that CSS spec is not specific enough on this issue and that browser makers chose different paths.
Anw, to the issue. Imagine floated element followed by an element which is absolutelly positioned (AP) and have this style applied:
You see, no left rule. IE will position the left edge of the AP at the point where right edge of the floated element is:
Opera/Gecko/KHTML will place it at the left:0 of the content area of the parent (which is what I would expect it to do):
Applying clear:both to the AP element has no effect, things stays the same. I have seen this behavior in IE6 several times, but I keep forgetting it and it hunts me again along the way, when I least need it. This way, I will probably remember it. I hope some of you might find this useful too.
This is one of the ways you can force IE6 to clear the floats in a container. And it partially works in IE7 too. The reason height:1% works is that IE7 internal engine is same as IE6, just with a lot less bugs in it. Why is float clearing a problem then? Because this part of the selector: * html does not work anymore - that bug is fixed.
However, IE7 still incorrectly interprets height:1% rule and will automatically expand the height of the box in question if its floated content can’t fit. Thus, that trick is still a viable solution to float clearing, especially since IE7 does not support :after selector yet, thus the solution working in all other modern browsers is not usable:
The * html will not match anything in IE7 and will have no effect at all. This also is an ugly hack: we use one IE bug applied through another IE bug. Ugly. Such hacks should be used only as last resort, when no other solutions are available. And IE has perfect solution available, called conditional comments.
Thus, using conditional comments the height:1% is still a fine solution for float clearing. However, there is a better one. IE7 now supports min-height rule (among others) and that rule also triggers the infamous hasLayout property in IE7 internal engine and thus it is usable for float clear.
This is simple to use (just put it at the start of your CSS file) and enumerate the elements which content should be cleared - the same list you use for IE6. And all is fine, because this can sit in your main .css file and no modern browser would choke on it.
IE7 has good enough support for the CSS2.1 that you should very rarely need to write IE7-only hacks, thus have little use for separate file containing IE7 tweaks. Actually, the float clear is the only thing I needed to change in all the sites I created in the last few years to make them working in IE7.