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>
お礼
大き目の物を買わなくて良いんですね。 ありがとうございました。