I've been doing static sites for a few years now, and I guess I've been mostly lucky so far, because I haven't had to become intimately familiar with IE bugs. But the site I just finished today was pretty messed up in IE7. I did some reading and was able to solve almost all of the layout issues simply by making sure everything had explicit widths. But there's one pesky issue remaining: a recent tweets section in the sidebar. Looks fine in real browsers as well as IE 8 and 9, but in IE7 the top margin seems to increase by a couple of hundred pixels, and I can't figure out how to solve it.

It looks like a margin issue, but for all I know it could be something completely different...possibly even related to the javascript (??). I have the the twitter widget in a div that sets at the bottom of a floated sidebar, which contains a couple of floated elements above the tweet section. It has a big top margin, spacing it down relative to the top of the sidebar. In IE7, it's spaced down a lot more...not quite double the specified top margin, but close to that

IE7 looks fine if I simple reduce the top margin of the twitter div...so I suppose I could just make a conditional comment for that browser and add one CSS rule. But I'm thinking there must be a better way, and that if someone points me to it, I'll learn something that will make me write better CSS the next time. Heh...I'm an optimist.

As for why the sidebar divs are floated, I can't say. I probably did it hurriedly because it solved some other minor issue at the time, and just left it that way.

If removing the floats works, I have no compelling reason to keep them. I don't typically position things with huge margins like that, but if I recall correctly, I had to because they were collapsing. Probably due to the floats?

I just removed all the floats and adjusted margins and now it looks OK. There's still a 4 pixel-ish gap between the tweets and the title graphic for the tweet box, but not a huge deal. Probably not worth chasing after, but I am curious about it, and if there's an easy way to fix it. Removing the floats also introduced that gap in Firefox, and it wouldn't go away until I set the image to line-height: 0. See attached image for what I mean.