アコーディオンナビゲーションの作成しておりましたがfirefoxでは問題なく反映されるのですが
IEで見るとtop,bottom,leftの三方に枠みたいなものが出てしまいます。原因がわからず困っています。誰かわかる方いらっしゃったらご回答お願い致します。
※IEの画像データを添付しております。
※jsはhttp://lab.komadoya.com/blog/2008/08/waterfall-j …よりダウンロードしました。
【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: "MS Pゴシック", 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ベストアンサー
- 回答日時:
HTMLのソースがわからないし、スタイルシートも無茶苦茶なので原因はわかりませんが・・
とりあえず、標準モードで起動するようにHTMLを直しましょう。
DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )
いまどき、互換モードやstrict以外で作成したら他のウェブ標準ブラウザとの差を吸収するのが大変になります。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』12年前から言われ続けてきたのに・・
それで、大抵のこの手の問題は治るはずです。
なお、こんな複雑怪奇な文書構造がわからないHTMLと、それに起因するスタイルシートを学んでも意味がないような・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ulタグやliタグの中でbrタグ...
-
htmlの<ol>タグで、数字などを...
-
画像にリンクを張ると画像がず...
-
Tableの1セル内に画像・テキス...
-
<ol><li> 左側にスペースがで...
-
【CSS】メニュー上部に固定させ...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
画像を形そのままで横に並べたい
-
リンク文字同士の間隔を開ける...
-
クリッカブルマップ(イメージマ...
-
Dreamweaverで、ul要素の下に写...
-
HTMLで組織図を作成する方法
-
<ul>~</ul>が二つ続くと間に改...
-
SWIFTでHtmlのソースの一部を取得
-
<li>で改行する横並びのメニュー
-
リストマーカーをボックス内に...
-
divタグ内のコンテンツが重なっ...
-
HTML5のfooterに見出しを付けて...
-
<ul><li></li></ul>にするメリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報