extra vertical space in IE after div clear

Question

I have created a simple grid of divs by left floating them and an empty div with a clear at the end of each row.

This works fine in Firefox, but in IE I get extra ve

Answer 1

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.

Answer 2

I had this issue with ie8 and used following

.clear
{
    clear:both;
    height:0;
    width:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow: hidden;
    font-size:0px;
}

Answer 3

The height: 0px did not work for me in IE 8. Also, I did not want a height of 1px, because then there would be a 1px white line across my div with a grey background, and I didn't want to set a special background color for every instance of a class="clear" div. I tried line-height: 0; and it worked great in IE8, IE7, and IE6 (I don't care about anything older than that) and FF 3.6, no additonal vertical space was added.

.clear {
    clear: both;
    line-height: 0;
    overflow: hidden;
}

Answer 4

Take a look in here too: http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

Answer 5

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

Answer 6

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

Changing it to 0px works better..