In IE6 menu is screwed up . I'm trying to solve this thing for hours. How can I fix that

Code:
<div id="menu">
  <ul>
    <a href="acnevit.html#menu"><li id="hak"><img src="images/acnevitdown.png" alt="Acnevit Hakkında"/></li></a>
    <a href="acnevit_bilesenleri.html#menu"><li id="bilesen"><img src="images/bilesenup.png" alt="Acnevit Bileşenleri"/></li></a>
	<a href="acnevit-klinik-sonuclar.html#menu"><li id="klinik"><img src="images/klinikup.png" alt="Klinik Sonuçlar"/></li></a>
    <a href="acnevit-hakkinda-sorulan-sorular.html#menu"><li id="soru"><img src="images/sorulan.png" alt="Sık Sorulan Sorular"/></li></a>
    <a href="acnevit-hakkindaki-yorumlar.html#menu"><li id="yorum"><img src="images/yorum.png" alt="Kullanıcı Yorumları"/></li></a>
    <a href="acnevit-siparis.html#menu"><li id="siparis"><img src="images/siparis.png" alt="Sipariş"/></li></a>
  </ul></div>
Code:
#mid {min-height: 1000px; overflow:auto; text-align:left;}
#mid ol{list-style-type:square; margin-left:45px;}
#mid ul {list-style-type:none; width:800px;display:inline;}
#mid ul li, #mid ul li a{background-color:#white; display:inline; float:left; font-family:Arial, Helvetica, sans-serif; font-size: 12px;font-weight:bold; margin-right: 5px;}
#mid ul li a { position:relative;}
#movie {margin-bottom:15px; margin-top:35px;}