CSSテクニックコミュのIE6でのliの横並び

こんにちは。いつもこのトピックで勉強させていただいています。

今回は、レイアウトテーブルの中に、リストをタブのように横に並べて表示をするナビゲーションを作りたいのですが、
2個ulを並べたうちの2個目のulのliアイテムが図のように段々に下がっていく現象について質問したいと思います。
動作確認は、winはMSIE6,FireFox1.5,MacIE5で行っています。

画像を見ていただくと、MSIE6での青いリスト（list2）がこのような状態です。
同じやりかたで問題なく表示されることもあるので、どういった理由でこうなるのか知りたいのです。

また、段々になってしまうことを回避しようと、ポジション指定してみても、
この段々のために取られた高さがなかったことにはならず、三つ目の画像のようになってしまいます…
（list2やheaderにvisivility:hiddenをあてても同じ結果）

レイアウトテーブルをやめてdivで括ったところ、問題がなくなりましたが、
レイアウトテーブルはすでに仕様で決まってしまっていて、本番では使わないわけに行かない状態です…

どうぞご教示願います！

http://www.liquiddive.com/sod/test.html

<style>
body {
text-align: center;
}

h1{
省略
}

h2{
省略
}


#mainTable {省略}
#header {省略}
#header #Btn {省略}

#header #Btn a {省略}

#header #Btn a:hover {省略}

/*heaerリスト1====================================================================*/

#header #list1 {
省略
}
#header #list1 li a{
省略
}

#header #list1 li#list1_Btn1 a:hover,
#header #list1 li#list1_Btn2 a:hover,
#header #list1 li#list1_Btn3 a:hover,
#header #list1 li#list1_Btn4 a:hover{省略（ロールオーバー）}


#header #list1 li#list1_Btn1 a {省略}

#header #list1 li#list1_Btn2 a {省略}

#header #list1 li#list1_Btn3 a {省略}

#header #list1 li#list1_Btn4 a {省略}

#header #list1 li#list1_Btn5 a {省略}


/*headerリスト2====================================================================*/

#header #list2 {
padding: 0px;
list-style-type: none;
height: 25px;
clear: right;
background-color: #66CCFF;
margin: 0px;
}
#header #list2 li a{
display: inline;
text-indent: -3000px;

float:left;
top: -3px;
height: 25px;
border: 1px dotted #CC0000;
}

#header #list2 li#list2_Btn1 a:hover,
#header #list2 li#list2_Btn2 a:hover,
#header #list2 li#list2_Btn3 a:hover,
#header #list2 li#list2_Btn4 a:hover,
#header #list2 li#list2_Btn5 a:hover{
background-position: 0px -25px;
display: block;
}


#header #list2 li#list2_Btn1 a {

width: 151px;
background-image: url(背景);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #0000FF;
}

#header #list2 li#list2_Btn2 a {

width: 133px;
background-image: url(背景);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #0066FF;
}

#header #list2 li#list2_Btn3 a {

width: 175px;
background-image: url(背景);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #FFCC99;
}




#header #list2 li#list2_Btn4 a {

width: 208px;
background-color: #0099FF;
background-image: url(背景);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#header #list2 li#list2_Btn5 a {

width: 115px;
background-color: #00FFFF;
background-image: url(背景);
background-repeat: no-repeat;
background-position: 0px 0px;
}

#mainTable #sidebar {
width: 208px;
}
#mainTable #content {
width: 580px;
padding-left: 14px;
}

</style>
</head>

<body><a name="pagetop"></a>

<table border="0" cellspacing="0" cellpadding="0" id="mainTable">
<tr>

<td id="header">
<h1>ヘッダ1</h1>
<h2>ヘッダ2</h2>

<div id="Btn"><a href="demand.html">ヘッダのボタン</a></div>

<ul id="list1">
<li id="list1_Btn1"><a href="list1_リンク1.html">リンク1</a></li>
<li id="list1_Btn2"><a href="list1_リンク2.html">リンク2</a></li>
<li id="list1_Btn3"><a href="list1_リンク3.html">リンク3</a></li>
<li id="list1_Btn4"><a href="list1_リンク4.html">リンク4</a></li>
</ul>

<ul id="list2">
<li id="list2_Btn1"><a href="list2_リンク1.html">リンク1</a></li>
<li id="list2_Btn2"><a href="list2_リンク2.html">リンク2</a></li>
<li id="list2_Btn3"><a href="list2_リンク3.html">リンク3</a></li>
<li id="list2_Btn4"><a href="list2_リンク4.html">リンク4</a></li>
<li id="list2_Btn5"><a href="list2_リンク5.html">リンク5</a></li>
</ul>


<div id="current">
<a href="index.html">HOME </a>» 
ここに現在いる階層を入力</div>

</td>
</tr>

<tr>
<td id="sidebar">
サイドメニュー
</td>
<td id="content">
コンテンツセル
</td>
</tr>
</table>