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

The page I'm talking about is here: http://rachelklapper.com/schedule.html

The html is simply:

Code:
<div id="twitter_div"><ul id="twitter_update_list"><li>&nbsp;</li></ul></div>
and then there's the script for grabbing the tweets:

Code:
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/racheldragonfly.json?callback=twitterCallback2&count=4"></script>
The CSS for the tweets section is:

Code:
#content #twitter_div {
	width: 219px;
	clear: left;
	margin: 346px auto 20px;
	
	}
	
#twitter_update_list {
	width: 219px;
	}
	
#twitter_update_list li {
	list-style-type: none;
	padding: 12px 7px 12px 12px;
	background: #A4A4A4 url(images/twitter_tile.gif) top left repeat;
	border-bottom: 1px solid black;
	color: #282828;
	font-size: 14px;
	}
	
#twitter_update_list li a {
	color: #5B6C97;
	}
	
#twitter_update_list li span {
	line-height: 16px;
	}
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.

Grateful for any help or suggestions.