I've been neck deep in HTML, CSS and JavaScript for 10 years, and I figured I had seen everything. Every now and again Everyone's Favorite Browser throws me for a loop.

I found a display bug in IE8 where scrollbars always appear on a DIV whose overflow is "auto" and contains a TABLE whose last row contains a TD or TH tag with a rowspan greater than 1.

HTML Code:
<div style="background-color: #ccffcc; overflow: auto;">
	<table style="background-color: #ffcccc;">
		<tr>
			<td rowspan="2">Bad</td>
			<td>A</td>
		</tr>
		<tr>
			<td>B</td>
		</tr>
	</table>
</div>
There are a number of fixes:

1) Add overflow="hidden" to the TABLE

HTML Code:
<div style="background-color: #ccffcc; overflow: auto;">
	<table style="background-color: #ffcccc; overflow: hidden;">
		<tr>
			<td rowspan="2">Good</td>
			<td>A</td>
		</tr>
		<tr>
			<td>B</td>
		</tr>
	</table>
</div>
2) Make sure the last row does not have a rowspan attribute and contains some sort of content:

HTML Code:
<div style="background-color: #ccffcc; overflow: auto;">
	<table style="background-color: #ffcccc;">
		<tr>
			<td rowspan="2">Good Too</td>
			<td>A</td>
		</tr>
		<tr>
			<td>B</td>
		</tr>
		<tr>
			<td colspan="2">&nbsp;</td>
		</tr>
	</table>
</div>
I actually discovered this working on a .NET web app using the Ajax Toolkit: <ajaxToolkit:RoundedCornersExtender />

I had a table whose last row contained a rowspan attribute, and used the <ajaxToolkit:RoundedCornersExtender /> tag to make its containg DIV a rounded corner box. I had scrollbars and couldn't get rid of them because the .NET-generated JavaScript was wrapping stuff in an anonymous DIV tag with its overflow set to "auto".

*sigh*

Just thought I'd share since this was such a bizarre bug.