HTML elements overlap in IE 7 ONLY

I have a page that looks great in every browser except IE 7, where the table in the center overlaps the grey section below. I have a fixed height on the center section for continuity between pages, so that needs to stay in place.

http://www.bikramyoga.cz/rozvrh.htm

I have tried to add a min-height, max-height, etc, !important declarations and the like, and nothing seems to keep the table within the 510px container.

I have run into this problem a couple of times. Try adding:

<div style="clear: both;"></div>

Right after:

<ul id="legend">
<li><img class="rozvrh" src="img/dot.png" alt="czech class">&#268;esk&#225; lekce</li>
<li><img class="rozvrh" src="img/box.png" alt="english class">Anglick&#225; lekce</li>
<li><img class="rozvrh" src="img/dud.png" alt="babysitting">&#268;esk&#225; lekce s hl&#237;d&#225;n&#237;m d&#283;t&#237;</li>
</ul>
</div>