more위치가 빨간색 부분으로 내려와야는뎅..middle이나 bottom을 써도 내려오지않아요..

소스는 다음과 같습니다..왜 이런현상이 나오는지 설명좀해주세요..그리고 해결방법좀..

****************************************************************************************
<script language="javascript">
function show_leemocon(size){ //show_leemocon를 선언
  var d1 = document.getElementById("size1"); // 탭1
  var d2 = document.getElementById("size2"); // 탭2
  d1.style.display = "none";
  d2.style.display = "none";

  switch(size){
  case 1:
    d1.style.display = "";
    break;
  case 2:
    d2.style.display = "";
    break;
  }
}
</script>

******************************************************************************

<td valign="top"><table width="285" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="285"><div id="size1" style="display:">
<img src = "../images/main/btn_news_on.gif"><a onClick="show_leemocon(2);" style="cursor:hand"><img src ="../images/main/btn_media_off.gif"></a><? echo latest("basic", "nw1", 3, 20);  ?></div>

<div id="size2" style="display:none;">
<a onClick="show_leemocon(1);" style="cursor:hand"><img src = "../images/main/btn_news_off.gif"></a><img src ="../images/main/btn_media_on.gif">
<? echo latest("basic", "ws3", 3, 20);  ?></div></td>
                    <td width="1"></td>
                 
                    <td>&nbsp;</td>
                  <td height="27" align="right" valign="top"><a href="#"><img src="../images/main/btn_more.gif" width="28" height="5" border="0" ></a></td>



                  </tr>
                </table></td>