extra vertical space in IE after div clear

IE is a bit funny about empty <div>s - it likes to give them the height of a line of text.

If you change .clear to this, it'll shrink to 1 pixel:

    .clear {
        clear: both;
        height: 1px;
        overflow: hidden;
    }

Put a background colour on to see what's happening

.clear {
    clear: both;
    height: 0px;
    overflow: hidden;
}

Changing it to 0px works better..

Without it it works in IE6, but not IE7, with it it works in IE7, but adds height in IE6. There is not word to describe my hatred towards this browser.