javascriptのアコーディオンメニューについ

質問

アコーディオンナビゲーションの作成しておりましたがfirefoxでは問題なく反映されるのですが
IEで見るとtop,bottom,leftの三方に枠みたいなものが出てしまいます。原因がわからず困っています。誰かわかる方いらっしゃったらご回答お願い致します。
※IEの画像データを添付しております。
※jsはhttp://lab.komadoya.com/blog/2008/08/waterfall-js.phpよりダウンロードしました。

【CSS】
*{
margin:0;
padding:0;
}
h1{
margin:30px 0;
font-size:150%;
}
h2{
margin-bottom:3px;
font-size:125%;
color:#9ac1c9;
}
#contents{
margin-bottom:20px;
}
#localNav{
float: left;
width: 180px;
}
#alphaBlock{
float:left;
width:590px;
margin-top:20px;
}
#footer{
margin-bottom:5px;
padding-top:5px;
border-top:1px solid #000;
}
#footer address{
font-style:normal;
font-size:87.5%;
text-align:center;
}

/*--------------------

accordion

--------------------*/
.accordionBox{
width: 180px;
font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 73%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.accordion{
width:180px;
}
.accordion dt{
width:180px;
border-top:none;
font-weight:bold;
cursor:pointer;
}
.accordion dd{
overflow:hidden;
display:none;
background:#FFF;
}
.accordion ul{
width:180px;
list-style:none;
border-top:none;
}
.accordion a,
.accordion a:active,
.accordion a:visited{
display:block;
color:#333;
text-decoration:none;
background:#eaf0f2;
width:180px;
}
.accordion a:hover{
background-color:#d9e1e4;
color:#000;
}

/*--------------------

float clear

--------------------*/
#contents,
.dropdownBox,
.accordionBox,
.clearFix{
overflow:hidden;
}

#contents:after,
.dropdownBox:after,
.accordionBox:after,
.clearFix:after{
content:"";
display:block;
clear:both;
height:0px;
overflow:hidden;
}

/*\*/
* html #contents,
* html .dropdownBox,
* html .accordionBox,
* html .clearFix{
height:1em;
overflow:visible;
}
/**/

/* or */
.clear{
clear:both;
}

【html】(一部)
<dl class="accordion" title="eight">
<dt id="ddheader-eight"><a href="A"><img src="images/common/left_nav_04.gif" width="180" height="40"></a></dt>
<dd id="ddcontent-eight">
<ul>
<li><a href="a">お茶</a></li>
<li><a href="b">酢</a></li>
<li><a href="c">滋養強壮・栄養ドリンク</a></li>
</ul>
</dd>
</dl>
<dl class="accordion" title="nine">
<dt id="ddheader-nine"><a href="B"><img src="images/common/left_nav_05.gif" width="180" height="40"></a></dt>
<dd id="ddcontent-nine">
<ul>
<li><a href="a" target="_top">シェイク・ドリンク</a></li>
<li><a href="b">代替食</a></li>
<li><a href="c">サプリメント</a></li>
<li><a href="d">ダイエットインナー・ウェア</a></li>
<li><a href="e">甘味料</a></li>
</ul>
</dd>
</dl>

回答No.1

ORUKA1951 · ベストアンサー

HTMLのソースがわからないし、スタイルシートも無茶苦茶なので原因はわかりませんが・・
とりあえず、標準モードで起動するようにHTMLを直しましょう。
DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )
　いまどき、互換モードやstrict以外で作成したら他のウェブ標準ブラウザとの差を吸収するのが大変になります。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』12年前から言われ続けてきたのに・・

　それで、大抵のこの手の問題は治るはずです。

　なお、こんな複雑怪奇な文書構造がわからないHTMLと、それに起因するスタイルシートを学んでも意味がないような・・