I am putting this here because it is the css that is doing something here. The Javascript may be involved, but ultimately I feel that the block positioning is not allowing enough room for something. I really don't know.

I have worked with html/css/javascript for quite some time and I am very familiar with the different firefox and IE bugs that always seem to come up. However, this little problem keeps showing up in IE and I can't for the life of me figure out why. Experience tells me it will be some small css or javascript piece that is missing that is just ridiculously simple, but I just can't see it! It is so frustrating, help me out if you can.

http://iluvsocal.com/facts.php

Go there. Click on population, a list of counties will pop up, every time you click a county it shows the cities. and that all works fine. In IE when you click the "Los Angeles" county link, it drops down and shows the cities just fine, but if you close it, and open it again, it shoves the cities below the actual page, and I have no clue why! All the other counties don't do that. I am wondering if I have some table tags or something that aren't closing (I imported some tables of the cities from excel). But shouldn't the Los Angeles county cities be offset initially?

CSS: This is only display css used here:
.div3{ margin-left:50px; width:490px; height:220px; display:none; overflow:auto; }

Page html: Only the small section that you need.
HTML Code:
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:60px;">
        <tr>
            <td class="style10 btn" onmousedown="view(0);" width="180" id="t0"><img id="img0" class="img0" src="images/farrow.png" border="0" />Los Angeles</td>
            <td class="style10 btn" onmousedown="view(0);" width="120"id="t0a">10,441,080</td>
            <td class="style10 btn" onmousedown="view(1);" width="180" id="t1"><img id="img1" class="img0" src="images/farrow.png" border="0" />Ventura</td>
            <td class="style10 btn" onmousedown="view(1);" width="120"id="t1a">844,713</td>
        </tr>
        <tr> 
            <td colspan="4">
                <div id="item0" class="div3 ITEM">
                           Los Angeles cities are in here!
                </div>
           </td>
           ...
           ...
         </tr>
         ...
         ...
</table>
Here is the javascript I use:
Code:
         function view(d){
		var itemname;
		var imgname;
		var items = 10; // Get all divs that may be open
		var openitem = "item"+d;
		var openimg = "img"+d;
		var divstate = document.getElementById(openitem).style.display;
		// Close all possibly open divs
			for(i=0;i<items;i++){
				itemname = "item"+i;
				imgname = "img"+i;
				document.getElementById(itemname).style.display = "none";
				document.getElementById(imgname).src = "images/farrow.png";
				
			}
		// Open the div selected
			if(divstate != "block"){
				document.getElementById(openitem).style.display = "block";
				document.getElementById(openimg).src = "images/farrow_down.png";
				
			}
		return;
	}