I'm trying to build a dynamic chart using images, and it looks fine in standards-compliant browsers, but in IE8 the baseline and everything below it is jumping up to the side of the chart. Anything in particular I could do to keep it in its proper place?
<html>
<head>
<style type="text/css">
div.float { float: left; }
.float img { display: block; border-style: none; }
.float span { display: block; font-size: 10px; }
</style>
</head>
<body>
<table>
<tr>
<td style="position: relative">
<div class="float">
<img src="x.gif" height="32" width="2" />
<span>$1500</span>
<img src="x.gif" height="41" width="2" />
<span>$1000</span>
<img src="x.gif" height="41" width="2" />
<span>$500</span>
<img src="x.gif" height="74" width="2" />
</div>
<div class="float">
<img src="x.gif" height="37" width="2"/>
<img src="x.gif" height="2" width="2" style="background-color: 000000" />
<img src="x.gif" height="52" width="2" />
<img src="x.gif" height="2" width="2" style="background-color: 000000" />
<img src="x.gif" height="52" width="2" />
<img src="x.gif" height="2" width="2" style="background-color: 000000" />
<img src="x.gif" height="53" width="2" />
</div>
<div class="float">
<img src="x.gif" height="202" width="2" style="background-color: 000000" />
</div>
<div width="310px" height="200px">
<div class="float">
<img src="x.gif" width="50" height="200" style="background-color: FFFFFF" />
</div>
<div class="float" height="200">
<img src="x.gif" width="3" height="56" style="background-color: FFFFFF" />
<img src="x.gif" width="3" height="34" style="background-color: FF0000" />
<img src="x.gif" width="3" height="71" style="background-color: 00FF00" />
<img src="x.gif" width="3" height="12" style="background-color: 0000FF" />
<img src="x.gif" width="3" height="27" style="background-color: FFFF00" />
</div>
<div class="float" height="200">
<img src="x.gif" width="3" height="138" style="background-color: FFFFFF" />
<img src="x.gif" width="3" height="2" style="background-color: 000000" />
<img src="x.gif" width="3" height="60" style="background-color: FFFFFF" />
</div>
<div class="float">
<img src="x.gif" width="5" height="200" style="background-color: FFFFFF" />
</div>
<div class="float" height="200">
<img src="x.gif" width="3" height="99" style="background-color: FFFFFF" />
<img src="x.gif" width="3" height="24" style="background-color: FF0000" />
<img src="x.gif" width="3" height="60" style="background-color: 00FF00" />
<img src="x.gif" width="3" height="1" style="background-color: 0000FF" />
<img src="x.gif" width="3" height="16" style="background-color: FFFF00" />
</div>
<div class="float" height="200">
<img src="x.gif" width="3" height="170" style="background-color: FFFFFF" />
<img src="x.gif" width="3" height="2" style="background-color: 000000" />
<img src="x.gif" width="3" height="28" style="background-color: FFFFFF" />
</div>
<div class="float">
<img src="x.gif" width="5" height="200" style="background-color: FFFFFF" />
</div>
<div class="float">
<img src="x.gif" width="50" height="200" style="background-color: FFFFFF" />
</div>
<!--the unstable line--><img src="x.gif" height="2" width="310px" style="background-color: 000000" />
</div>
<img src="x.gif" height="2" width="35" />
<span style="font-size: 10pt; font-family: Times New Roman">Sep 2009</span>
<img src="x.gif" height="2" width="25" /><br/><br/>
<div width="310px">
<img src="x.gif" width="8" height="8" style="background-color: FF0000" />
100
<img src="x.gif" width="8" height="8" style="background-color: 00FF00" />
110
<img src="x.gif" width="8" height="8" style="background-color: 0000FF" />
120
<img src="x.gif" width="8" height="8" style="background-color: FFFF00" />
200
</div>
</td>
</tr>
</table>
</body>
</html>