専門家に聞いた!繰り返す痔の原因は!? >>

ホームページ作成に関して困っており誰かご存知の方がいらしゃったら
ご回答の程お願い致します。

アコーディオンメニューをjavascriptを使って作成しました。
しかし、firefoxではうまく表記されるのですがIEで開くと
メニューボタンのまわりに枠がでてしまいます。

知識不足申し訳ありませんがご協力お願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

念のためですが・・


div.section,div.footer{margin-left:165px;}
h1{text-align:center;}
などで、よけとかないと・・・

HTMLに変なことしてなけりゃ、スタイルシートでどうにでもなります。
HTMLがちゃんとしてれば、googleなんかも、きちんと理解してくれます。
IE8以前は、ゆっくりは開かないですが利用に差し支えはないでしょう。
    • good
    • 0

スタイルシートのborderに関する設定をすべて取り除いてください。


とても、煩雑で酷いソースなので、これ以上具体的なアドバイスはできません。修正箇所は膨大な数になります。最後に全称セレクタでborder:noneを入れておくとよいようです。

 ただ、javascriptを使わなくても、デザインのために変なHTMLを書かなくても、もっと簡単に記述できるものを探したほうが良いように思います。IE8以下で、ゆっくり開くことを期待しなければ、他のすべての標準ブラウザでCSS3を使ってもっと簡単にできます。
 そもそも、こんなHTMLやスタイルシートだと、ちょっと項目数が変わったらすべて書き直さなきゃなりません。ましてや、デザインをまったく変えて横並びにしようとしたら不可能でしょ。HTMLには、サンプルのようにデザインのためのものは一切書いたらダメです。
IE9およびfirefox,Opera,GoogleChrome,safariで動作します。

下記は簡単なHTMLです。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )
でテスト済みです。確認してください。
 スタイルシートの一部のややこしい部分はベンダーフィックスと言って色々なブラウザへの対処です。
注) target属性は非推奨です。
注)タブは、_に置換してあるので戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
#GlobalNavi dl,#GlobalNavi dl dt,#GlobalNavi dl dd,
#GlobalNavi dl dd ul,#GlobalNavi dl dd ul li{
display:block;width:100px;margin:0;padding:0;font-weight:normal;
line-height:1.6em;text-align:center;}
#GlobalNavi dl dt{font-size:0.9em;line-height:3em;position:relative;border-top:1px solid gray;}
#GlobalNavi dl dt:hover{background-color:silver;}
#GlobalNavi dl dd{font-size:0.8em;line-height:1.3em;}
#GlobalNavi a{text-decoration:none;display:block;width:100%;width:100%;}
#GlobalNavi dl dd li{height:0;overflow:hidden;position:relative;
-moz-transition-property: height;
-webkit-transition-property: height;
-o-transition-property: height;
-ms-transition-property: height;

-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
-ms-transition-duration:1s;

-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;}
#GlobalNavi dl dt:hover+dd li,
#GlobalNavi dl dt+dd:hover li{height:1.3em}
#GlobalNavi dl dd li a{background-color:silver;}
#GlobalNavi dl dd li a:hover{background-color:gray;}

-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<div class="nav" id="GlobalNavi">
___<dl>
____<dt><a href="http://www.yahoo.co.jp/">化粧品</a></dt>
____<dd>
_____<ul>
______<li><a href="http://www.yahoo.co.jp/">スキンケア</a></li>
______<li><a href="http://www.yahoo.co.jp/">ベースメイク</a></li>
______<li><a href="http://www.yahoo.co.jp/">メイクアップ</a></li>
______<li><a href="http://www.yahoo.co.jp/">UV対策・日焼け止め</a></li>
______<li><a href="http://www.yahoo.co.jp/">ヘアケア用品</a></li>
_____</ul>
____</dd>
___</dl>
___<dl>
___<dt><a href="http://www.yahoo.co.jp/">美容アイテム</a></dt>
____<dd>
_____<ul>
______<li><a href="http://www.yahoo.co.jp/">ヘアカラー</a></li>
______<li><a href="http://www.yahoo.co.jp/">カラースプレー</a></li>
______<li><a href="http://www.yahoo.co.jp/">アイテープ・アイプチ</a></li>
______<li><a href="http://www.yahoo.co.jp/">美顔器・美顔ローラー</a></li>
______<li><a href="http://www.yahoo.co.jp/">パーマ液</a></li>
_____</ul>
____</dd>
___</dl>
___<dl>
___<dt><a href="http://www.yahoo.co.jp/">サプリメント</a></dt>
____<dd>
_____<ul>
______<li><a href="http://www.yahoo.co.jp/">ビタミンサプリメント</a></li>
______<li><a href="http://www.yahoo.co.jp/">ビューティサプリメント</a></li>
______<li><a href="http://www.yahoo.co.jp/">酵母・酵素サプリメント</a></li>
______<li><a href="http://www.yahoo.co.jp/">スポーツサプリメント</a></li>
______<li><a href="http://www.yahoo.co.jp/">動物系サプリメント</a></li>
_____</ul>
____</dd>
___</dl>
___<dl>
___<dt><a href="http://www.yahoo.co.jp/">健康飲料</a></dt>
____<dd>
_____<ul>
______<li><a href="http://www.yahoo.co.jp/">お茶</a></li>
______<li><a href="http://www.yahoo.co.jp/">酢</a></li>
_____</ul>
____</dd>
___</dl>
__</div>
__
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・</p>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</html>
    • good
    • 0

ちゃんと見ていませんので、推測の回答ですみませんが…




>メニューボタンのまわりに枠がでてしまいます。

 <a href~~><img src~~ alt~></a>
の部分に対して、リンクのデフォルトの青枠線が表示されているのではないかと思います。

CSSの適当な位置に、
 dl.accordion dt a img{ border-style:none; }
などのように、初期設定として一旦クリアしておけばよろしいのではないかと推測します。
(多分、グレーのセパレータはborderで指定しているのではないかと思いますが、クリアする際の詳細度が高くなりすぎないようにご注意ください)
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング