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 vertical space between rows. I tried to apply the "clearfix" method, but I must be doing something wrong.
Why does IE insert the 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>