(Note, this is not the double-margin bug. I'm calling this the double-vertical-padding bug for now unless someone else has a more clever/documented name for this?)
Just when I thought I'd seen all the quirky IE CSS bugs, I've produced a simple test case that continues to confuse me. The page below looks and works great in FF, Opera, et al. However, IE 6 and IE 7 seem to be confused. I will let the document I'm pasting below speak for itself.
Edit: I've put this at the following URL: http://jsbin.com/efele
Open it up in IE and again in FF. Compare.
My question is: what is this bug called? (Have I missed this somewhere? Is it found on this page?) I'm familiar with the 3px jog bug and the double-(horizontal)-margin bug and lots of other float-related bugs. But... vertical padding is being duplicated? (And put in the wrong place, to boot.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE bork!</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#container {
border:1px solid red;
background-color:#CC99CC;
width:800px;
margin:0 auto;
padding-top:100px;
}
#sidebar {
float:left;
display:inline;
width:200px;
border:1px solid blue;
background-color:#00CCFF;
}
#content {
float:right;
display:inline;
width:510px;
border:1px solid green;
background-color:#66CC99;
}
.clear {
clear:both;
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */
background-color:#CCCCCC; /* bg color here is just for debugging */
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">I am the sidebar</div>
<div id="content">I am the content</div>
<div class="clear"><!-- clear! --></div>
</div>
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p>
</body>
</html>
P.S., I did eventually figure out how to appease IE on this. The solution (explicitly setting a height on my "clear" div) is commented out in order to show the bug. I only wish I could have the last few hours of my life back that it took me to stumble across the real issue/solution!
Thank you!