Geek Answers Handbook

Extra vertical space in IE after div clear

I created a simple left float divs grid and an empty div with a clear at the end of each line.

This works fine in Firefox, but in IE I get extra vertical space between the lines. I tried to apply the clearfix method, but I have to do something wrong.

Why does IE insert extra vertical space and how can I get rid of it?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> root { display: block; } body { background: white; } .colorChip { position:relative; float: left; width: 20px; height: 20px; margin: 2px; border-style: solid; border-width: 1px; border-color: black; } .clear { clear: both; } .clearfix { display:inline-block; } .clearfix:after, .container:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } * html .clearfix { height:1%; } .clearfix { display:block; } </style> <!--[if IE]> <style type="text/css"> .clearfix { zoom: 1; /* triggers hasLayout */ </style> <![endif]--> </head> <body> <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div> <div class="colorChip" style="background: rgb(190,170,113)"></div> <div class="colorChip" style="background: rgb(190,250,113)"></div> <div class="clear"></div> <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div> <div class="colorChip" style="background: rgb(215,197,154)"></div> <div class="colorChip" style="background: rgb(243,225,181)"></div> <div class="clear"></div> <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div> <div class="colorChip" style="background: rgb(129,118,92)"></div> <div class="colorChip" style="background: rgb(155,144,116)"></div> <div class="clear"></div> </body> </html>
+6
html internet-explorer clear
source share
6 answers

IE is a little ridiculous about an empty <div> - it likes to give them the height of a line of text.

If you change .clear to this, it will be reduced to 1 pixel:

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

Put the background color to see what happens

+14
source share
 .clear { clear: both; height: 0px; overflow: hidden; }

Changing it to 0px works better.

+4
source share

Without it, it works in IE6, but not IE7, with it it works in IE7, but adds height in IE6. There are no words to describe my hatred of this browser.

+2
source share

Height: 0px does not work for me in IE 8. Also, I didn’t want 1px height, because then there would be 1px a white line on my div with a gray background, and I did not want to set a special background color for each instance of the div class = " clear ". I tried the line-height: 0; and it did a great job in IE8, IE7 and IE6 (I don't care about anything older than this) and FF 3.6, no extra vertical space added.

  .clear {
     clear: both;
     line-height: 0;
     overflow: hidden;
 }
+1
source share

I had this problem with ie8 and the following was used

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

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

0
source share

More articles:


All Articles