So it would seem that there is a new 3px gap bug for IE7. I think it may be related to the original 3px bug that was prevalent in IE6. However according to Position is Everything (A very well respected source of great IE trickery and design principles), this bug died with IE6 (If only IE6 would actually die).
So, while working on getting a few <div>s to ride up the side of a floating <div>, I found that IE7 does still have some sort of problem that causes a 3px gap to develop beside the "floater."
Here is the setup: Say you have three <div>s within a containing <div>. The container is a fixed size, one <div> floats right and is a fixed size, two <div>s are allowed to slide up beside the floating <div>, however the last of the two has a fixed width calculated (including margin, padding, and borders) to be a seamless fit beside the floater. Let's see what happens...
Basically, what you want is this:
What you get is this:
These <div>s are mathematically positively supposed to fit. Why do they not? That's the bug.
It would appear that IE7 has a tendency to inject 3 pixels of phantom margin on the side of the floating element. As far as I can tell, the best way to deal with this is to give the floating <div> -3px of margin on the side opposite the one in which it floats. Therefore, if your floater is floating right, you need to give it -3px of margin on the left side. Strange indeed. That's IE for you though.
If you would like to test this on your machine you can copy the code below:
<html>
<head>
<title>IE Sucks so much!</title>
<style type='text/css'>
.container {
width: 600px;
}
div {
margin: 0;
padding: 0;
}
.floater {
width: 120px;
height: 165px;
background: red;
float: right;
/*margin-left: -3px;*/
}
.content {
height: 60px;
background: green;
}
.extras {
width: 480px;
background: tan;
}
.extras a {
margin-right: 5px;
}
</style>
</head>
<body>
<div class='container'>
<div class='floater'>If only IE didn't suck so much...</div>
<div class='content'><p>This is the primary content. It is displayed beside the floater.</p></div>
<div class='extras'><a href='/'>Link 1</a><a href='/'>Link 2</a><a href='/'>Link 3</a></div>
</div>
</body>
</html>
So, to fix the issue in IE7 I recommend using conditional comments and a separate style sheet with your IE "fixes."
On an aside: I have not tested this to the extreme so there may be variability out there somewhere. I am just reporting what I have found to be the case. If you know any more details about this bug please drop us a comment or contact us.
Thanks
