ついに夏本番!さぁ、家族でキャンプに行くぞ! >>

サイドメニューのロールオーバーにマウスを合わせるとメニューがガクガク動いてしてしまい困っています。ブラウザはIE8です。firefoxは問題ありませんでした。

具体的に言うと、
CSSでサイドメニューのロールオーバーを作成したのですが、IE8上で表示し、実際マウスを合わせると、ガクガクメニュー項目が動いていまうのです。

考えられる、原因を教えていただけないでしょうか?
以下は実際の問題のコードです。

HTML

<div id="box-ml">
<ul id="ul-ml">
<li id="li-ml-kg"><strong>生命保険のカテゴリー</strong></li>
<li id="li-ml-kg"><strong>個人の生命保険</strong></li>
<li id="li-ml"><a href="../seiho/kojin/goriteki_kanyunosikata/gouriteki_kanyu.html">合理的な加入の仕方</a></li>
<li id="li-ml"><a href="../seiho/kojin/syohin/shohin_shikumi.html">生命保険商品一覧</a></li>
<li id="li-ml"><a href="../seiho/kojin/nendaibetsu/life_stage.html">カテゴリー別加入方法</a></li>
<li id="li-ml"><a href="../seiho/kojin/mangaichi/mangaiti_okita.html">万が一が起きてしまったら</a></li>
<li id="li-ml"><a href="../seiho/kojin/hoken_sisanunyo.html">生命保険で資産運用</a></li>
<li id="li-ml"><a href="../seiho/kojin/goriteki_kanyunosikata/syohinbetsu.html">生命保険の得する情報</a></li>
<li id="li-ml-kg"><strong>法人の生命保険</strong></li>
<li id="li-ml"><a href="../seiho/hojin/index_seiho_hojin.html">法人の生命保険商品一覧</a></li>
<li id="li-ml"><a href="../seiho/hojin/iryo_hojin.html">効果的な保険利用方法</a></li>
<li id="li-ml-kg"><strong>損害保険のカテゴリー</strong></li>
<li id="li-ml-kg"><strong>個人の損害保険</strong></li>
<li id="li-ml"><a href="../sonpo/kojin/index_sonpo_kojin.html">個人の損害保険商品一覧</a></li>
<li id="li-ml-kg"><strong>法人の損害保険</strong></li>
<li id="li-ml"><a href="../sonpo/hojin/index_sonpo_hojin.html">法人の損害保険商品一覧</a></li>
<li id="li-ml-kg"><strong>社会保険のカテゴリー</strong></li>
<li id="li-ml"><a href="../syakaihosyo/syakaihosyo_katsuyo.html">使える社会保障制度</a></li>
<li id="li-ml-kg"><strong>保険と税金</strong></li>
<li id="li-ml"><a href="../zei/index_zei.html">保険と税金</a></li>
<li id="li-ml-kg"><strong>保険Q&A</strong></li>
<li id="li-ml"><a href="../qa/index_qa.html">保険にまつわるQ&A</a></li>
<li id="li-ml-kg"><strong>保険の裏技・落とし穴</strong></li>
<li id="li-ml"><a href="../urawaza/urawaza.html">保険の裏話・落とし穴</a></li>
</ul>
</div>

CSS

#box-ml {
padding: 0px 0px 10px;
width: 200px;
float: left;
background-image: url(img/li-a-bg.jpg);
}

#ul-ml {
margin: 0px;
padding: 0px;
display: inline;
text-indent: 0px;
list-style-type: none;
text-align: left;
}

#li-ml-kg {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 26px;
background-image: none;
text-indent: 20px;
background-color: #66CC00;
border: 1px solid #CCCCCC;
color: #FFFFFF;
}

#li-ml {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 26px;
background-image: url(buttons/li-bg.gif);
text-indent: 20px;
}

#li-ml a:hover {
margin: 0px;
list-style-type: none;
padding: 0px;
display: block;
line-height: 25px;
background-image: url(buttons/li-bg-m.gif);
text-indent: 20px;
color: #FF0000;
}

宜しくお願いいたします!

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

A 回答 (2件)

がくがくするってことは


つまりどこかでサイズがずれる様な現象が起こってるってことでしょ。
それもマウスオーバーとマウスが居ない時のスタイルシートの設定を見比べて、その二つのどこかにサイズがずれる様な要素が紛れ込んでいるという事です。

line-height: 26px;
line-height: 25px;
と一カ所だけ25pxになっている所があったんで、
この数値だけを直してあげれば、FirefoxだろうとIE7だろうと、がくがくしませんよ♪

この回答への補足

すばやい回答ありがとうございます!

がくがくという表現が間違っていたかもしれません。
あるメニューにマウスオーバーさせると、そのメニューの下にメニューの背景画像が現れ、サイドメニュー全体が、そのメニュー以下、下にガクンと下がります。

マウスを合わせる度に「がくがく」サイドメニューが下に下がるのでそう表現してしまったのですが、正確には1つのメニュー分の背景画像があらわれ、マウスオーバーさせる度に、下にガクンとサイドメニューが下がるのです。

一応、指摘の箇所は修正して見ましたが、治りませんでした。

説明がわかりずらくすみませんが、宜しくお願いいたします!

補足日時:2009/05/24 13:57
    • good
    • 0

そうでしたか。


こちらで画像のサイズを変えたりして再現しようと思ったのですが、
合わせた場所より下が全部ずれるという現象を再現出来ませんでした。

使用している画像のサイズ2種類と、現在使用しているブラウザを教えてくれませんか?
もしかしたら、そのあたりに原因があるかもしれません。
    • good
    • 0
この回答へのお礼

すばやい回答、本当に助かります。

先ほど、CSSの以下の部分を下記のように訂正したところ、
解決できました!

#li-ml {

#li-ml a {

色々と試していただき、お手数おかけして、本当にすみません。
しかし、回答はとても参考になりました。
ありがとうございました!

お礼日時:2009/05/24 16:05

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qマウスのホイールと左クリックがおかしい

マウスの左クリックの調子が悪く、一度分解をしてみました。
その左クリックのスイッチの所に届いていない(?)みたいで開けた状態でスイッチを押すと左クリックはきくのですが…。
マウスはHID 準拠マウス というXP購入時に付属していたマウスです。
後、そのときの衝撃で外れたホイールの近くの金具が二個落ちてしまいました。丸まっているパーツ(右クリックの方向)は付けれたのですが左のパーツの位置がどうにもわからなくて・・・。
お暇な方、お願いします。

Aベストアンサー

こういってしまうと元も子もないのですが、マウスなんて安いんだから新しいの買いましょう。

修理方法を知りたいのですか?
写真も無し、型番も無しではさすがに答えようがありませんよ。
ホイール近くの金具? 丸まってるパーツ? なんのこっちゃですよ。

Qcssでロールオーバー設定した画像がoperaでは最初のロールオーバーでは非表示になります

いつもお世話になっております。
以下の様にcssを組みました。
〔css〕
@charset "UTF-8";
#bnn0513 span {
display:none;
}
#bnn0513 a {
display:block;
width:212px;
height:102px;
padding:0;
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:link {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:visited {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:hover {
background-image:url(images/sample_ov.gif);
background-repeat:no-repeat 0 0;
}
#bnn1 a:active {
background-image:url(images/sample_on.gif);
background-repeat:no-repeat 0 0;
}
〔xhtml(一部)〕
<div id="bnn0513">
<a href="sample.html"><span>サンプル</span></a></div>
CSSでロールオーバー設定した画像が、他のブラウザではきちんと表示されるのですが、operaブラウザでは一度目にカーソルをロールオーバー指定した場所に置くと、hover用の画像が表示されず、sample.gifの画像も消えてしまいます。
一旦カーソルを移動させて再び戻すとhover用の画像は表示されます。
一度目にカーソルを置いたときもキチンと表示される様にしたいのですが、どうすればよろしいでしょうか?
java等他のプログラミングが入っても構いませんので方法をご教授ください。
宜しくお願い致します。

いつもお世話になっております。
以下の様にcssを組みました。
〔css〕
@charset "UTF-8";
#bnn0513 span {
display:none;
}
#bnn0513 a {
display:block;
width:212px;
height:102px;
padding:0;
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:link {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#bnn0513 a:visited {
background-image:url(images/sample.gif);
background-repeat:no-repeat 0 0;
}
#...続きを読む

Aベストアンサー

サンプル画像で検証しました。確かにOpera9.61では初回のa:hoverの際にsample_ov.gifがうまく読み込まれない様です。
UA側の仕様だと思いますので、これを回避するには、コンテンツを表示する際に予めJavaScriptでsample_ov.gifをプリロードしておくか、画像置換の方法をちょっと変える、といった対策があるかと思います。

前者は「JavaScript 画像 プリロード」などのキーワードでググるとサンプルがわんさか出てきますので、後者の方法のみ。
これもよく見られるCSSによる画像置換の手法なのですが、offとonの画像を2つに繋げて一つの背景画像として読み込み、a:hoverの時にはbackground-positionプロパティで背景画像の描画開始位置をずらす事でロールオーバー効果を出す、というものです。
つまり、現在使用されているsample.gif(W212px×H102px)とsample_ov.gif(同サイズ)を縦に二つ繋げて、W212px×H204pxの一枚の画像にします。これを仮にsample2.gifとします。

ちなみに、今回の件には影響してませんが、CSSにちょっと間違いや無駄がありますので先にその点を。

#bnn0513 a {
(省略)
background-repeat:no-repeat 0 0;←"0 0"の値はbackground-repeatのものではなく、background-positionのものです。削除して下さい(以下全ての疑似クラスでも同様)
}
#bnn0513 a:link {
(省略)
background-repeat:no-repeat;←この指定は#bnn0513 aのセレクタで既に指定されているので省略できます。(以下全ての疑似クラスで同様)
}

以上を含めた修正版です。
---------------------------------------------------------------------
(省略)
#bnn0513 a {
display: block;
width: 212px;
height: 102px;
padding: 0;
background: url(images/sample2.gif) no-repeat;
}
#bnn0513 a:link {
background-position: 0 0;
}
#bnn0513 a:visited {
background-position: 0 0;
}
#bnn0513 a:hover {
background-position: 0 -102px;
}
(省略)
---------------------------------------------------------------------
※#bnn0513 a:linkと#bnn0513 a:visitedの指定はディフォルト値なので省略してもかまいません。a:hoverとの対比が分かり易い様に明示しただけです。

なお、本件の場合はa:active時の画像も変えられている様ですので、正確にはsample_on.gifも更に付け足したW212px×H306pxの画像が必要になると思います。その場合は、上記のa:hoverと同様の考え方で、上記画像を作った上で、
#bnn0513 a:active {
background-position: 0 -204px;
}
と指定すればよろしいかと。

不具合ありましたら補足して下さい。

サンプル画像で検証しました。確かにOpera9.61では初回のa:hoverの際にsample_ov.gifがうまく読み込まれない様です。
UA側の仕様だと思いますので、これを回避するには、コンテンツを表示する際に予めJavaScriptでsample_ov.gifをプリロードしておくか、画像置換の方法をちょっと変える、といった対策があるかと思います。

前者は「JavaScript 画像 プリロード」などのキーワードでググるとサンプルがわんさか出てきますので、後者の方法のみ。
これもよく見られるCSSによる画像置換の手法なのですが、off...続きを読む

Qワイヤレスマウスの使い心地は良いですか?

ワイヤレスマウスの使い心地は良いですか?

ワイヤレスマウスを使いたいと思っています。
今のマウスは光学式の有線のマウスです。

ワイヤレスマウスに代えた人のご意見を下さい。
よろしくお願いします。

Aベストアンサー

>PC側とマウス側の両方に電池をつけないといけないのでしょうか?

受信機はパソコン本体のUSB端子に付けるので電源はパソコンから供給されます。
電池が必要なのはマウス本体です。

>また、電池の大きさや種類ですけれど、単三電池タイプ以外にもいろいろ有るのでしょうか?

今は単四2本タイプを使っていますが、高性能電池を使っても1ヶ月しか持ちません。(マンガンは数日、アルカリは数週間?)
以前は単三1本タイプを使っていましたが、これでも数ヶ月程度。
乾電池用に作られているので、充電式電池を使用した場合は電池電圧が低いので持ちが悪いです。

ボタン電池ではすぐに終わってしまうでしょうね。
充電式のマウスも販売されているので検討して見てください。

http://www2.elecom.co.jp/peripheral/mouse/m-d4ur/

Qテンプレートのメニューをロールオーバーに

http://www.template-jungle.com/no-4-%E3%82%B9%E3%82%AB%E3%82%A4%E3%83%96%E3%83%AB%E3%83%BC/


上記の無料ホームページのテンプレートを使いたいのですが、これのメニュー部分をロールオーバーにするにはどうしたら良いのでしょうか?

色々と自分で試してみたのですが、左右に空白ができたり、ロールオーバーになってなかったりで、上手く出来ませんでいた。


ドコをどのように書き換える(または書き足す)等、具体的に教えていただけないでしょうか?


よろしくお願いします。

Aベストアンサー

あまりに酷いソースなので意味ないですが・・・<center>なんて比推奨の代表みたいなものが使われている。

 メニュー部分をロールオーバー・・・プルダウンではなく・・・したいだけなら、:hover擬似クラスを使うだけで、それによってデザインが変化することはありえません。

時間が取れたら簡単なサンプルを書いてみましょう。

Qマウスの右クリックが効かない!

今までマウスで、コピーしたい文を選んで右クリックすると、
コピーとか切り取りとか出来たのですが、出来なくなりました。

どうしてでしょうか?お詳しい方教えて下さい。

Aベストアンサー

こんばんわ。
セーフモードなどはご存知でしょうか?
なにかトラブルなどが起きたらセーフモードで直る可能性があるんですが、下記のホムペを参考にもう一度確認してみてくださいね!

参考URL:http://winxp.pasokoma.jp/9_266084.html

QCSSでロールオーバーメニューボタンを作った際の真ん中配置方法について

CSSのメニューボタンの真ん中配置方法について質問です。

HTMLは
<ul class="list">
<li><a href="#sample">リスト1</a></li>
<li><a href="#sample">リスト2</a></li>
<li><a href="#sample">リスト3</a></li>
<li><a href="#sample">リスト4</a></li>
<li><a href="#sample">リスト5</a></li>
</ul>

CSSは
.list{
padding:0;
margin:0;
width:100%;
list-style-type:none;

}
.list li{
float:left;
padding:0;
margin:0 auto 0 auto;
list-style-type:none;
background:none;
background-color:#eeeeff;
}
.list li a{
display:block;
padding:0.2em 0 0;
width:80px;
color:#0000ff;
font-size:12px;
text-align:center;
}
.list li a:link,
.list li a:visited{
text-decoration:none;
border-bottom:5px solid #eeeeff;
}
.list li a:hover,
.list li a:active{
text-decoration:none;
border-bottom:5px solid #003399;
}
っと設定しております。

この方法だと画面の左寄りにメニューボタンが
表示されてしまい、小生の制作しているwebサイトが
真ん中配置の表示の為に格好が悪くなります。

そこで、このロールオーバーメニューボタンを
真ん中配置にしたいのですが、どうしたら
よいでしょうか。

ulにwidth指定して、任意の数字と単位をいれて、
marginで左右のautoをとりましたが、真ん中に
表示されませんでした。

positionは行っておりません。

是非よろしくお願い致します。

過去ログにはコンテンツ自体を真ん中に表示する方法の
質問はありましたが、上記のような質問が
ないようなので、新しく質問いたしました。

どうぞ、よろしくお願い致します。


補足
小生のwebサイトは全体巾を760pxにしていして
その中でカラムを組んでおります。
メニューボタンは巾760px内で横一列にして、
真ん中配置(左右に隙間が開くなら、その隙間が
左右で等間隔になるようにしたいと考えております。)
にしたいです。

よろしくお願い致します。

CSSのメニューボタンの真ん中配置方法について質問です。

HTMLは
<ul class="list">
<li><a href="#sample">リスト1</a></li>
<li><a href="#sample">リスト2</a></li>
<li><a href="#sample">リスト3</a></li>
<li><a href="#sample">リスト4</a></li>
<li><a href="#sample">リスト5</a></li>
</ul>

CSSは
.list{
padding:0;
margin:0;
width:100%;
list-style-type:none;

}
.list li{
float:left;
padding:0;
margin:0 auto 0 auto;
list-style-type:none;
...続きを読む

Aベストアンサー

こんにちは

>ulにwidth指定して、任意の数字と単位をいれて、
>marginで左右のautoをとりましたが、真ん中に
>表示されませんでした。

widthはいくつに設定しました?
<ul>widthは80px*5で400pxとなります

.list{
padding:0;
margin:auto;
width:400px;
list-style-type:none;
}

Qサンワサプライのマウスパッドで突然反応不良

サンワサプライのマウスパッドで突然反応不良
バッファローの光学式マウス(blue tooth)BSMOW03をMacOS10.3.9で使用しています。
突然、サンワサプライのマウスパッドMPD-OP26BL上ではマウスポインタが動かなくなりました。
ところが、マウスパッドを取り外すと使用できるようになります。
綿密な調査をして這いませんが納得が行かない状態です。

実はこのマウス、1ヶ月くらい使用した時点で反応しなくなり、初期不良として新品と交換しました。
MacOSとの相性が悪いのでしょうか?

Aベストアンサー

http://buffalo-kokuyo.jp/products/input/mouse/wireless-optical/bsmow03/

http://www.sanwa.co.jp/product/syohin.asp?code=MPD-OP26BL

BSMOW03はbluetoothではありません。

27MHz帯の使用範囲が狭い無線マウスで、マウスパットにアルミ層がある為、電波環境が悪いだけでは?
又、電池の残量はありますか?

Qメニューのマウスオーバーについて

表題の件ですが、やり方はとてもたくさんあります。
JavaScriptやcssなど。

JavaScriptの場合、検索結果で、メニューとして、JSを使用した箇所が表示されません。
画像置き換えの場合text-indent:-9999px;やdisplay:none;とした際、評価が下がるとのことです。

どちらにもデメリットがあるようですが、今主流となっているマウスオーバーでの画像の切り替えはどのようなものでしょうか。

ご協力お願いいたします。

Aベストアンサー

>画像置き換えの場合text-indent:-9999px;やdisplay:none;とした際、評価が下がるとのことです。
 それはありません。
 それがまずいと判断されるのは、隠しリンクになっていたり、コンテンツ自体を隠してしまったときだけです。
 javascriptを使うと、javascriptでドキュメントの書き換えやjavascript自体を無効にしているユーザーに表示されないこと。そしてなによりも検索エンジンにリンクを知らせることが出来ない欠点があります。googleには、
【引用】____________
Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )]より

 CSSを使う一番の理由は、まさにSEOなのです。HTML自体は検索エンジンには率直で文書構造がはっきり理解できるものになっています。(ソースを見ると)
 それでいて、CSSを書き換えると、様々にデザインできます。(表示メニューからスタイルを選択してみる。また印刷プレビューも確認)
 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

 添付はLynxで見たとき

>画像置き換えの場合text-indent:-9999px;やdisplay:none;とした際、評価が下がるとのことです。
 それはありません。
 それがまずいと判断されるのは、隠しリンクになっていたり、コンテンツ自体を隠してしまったときだけです。
 javascriptを使うと、javascriptでドキュメントの書き換えやjavascript自体を無効にしているユーザーに表示されないこと。そしてなによりも検索エンジンにリンクを知らせることが出来ない欠点があります。googleには、
【引用】____________
Lynx などのテキスト ブ...続きを読む

Q無線マウスとBluetoothマウス

現在無線RUN環境でBluetoothマウスを使っています。しかし、無線RUN環境でのBluetoothマウスの使用は、互いの通信速度の干渉するということを聞きました。では、無線RUN環境での、通常、市配されているBluetoothマウスでないワイヤレスマウスは互いに干渉しないのでしょうか。どうか教えてもらえないでしょうか。よろしくお願いします。

Aベストアンサー

無線LANは、Bluetoothと干渉しない11a(5G帯)を使用すべきです。仮にPC側が802.15.2に準拠していたとしても、アクセスポイントは、Bluetoothを避けられない。
まずBluetoothは、Ver1.2(AFH)/2.0 EDRに対応しているのか。
現状のマウス、キーボードはVer1.1だと思います。
マウスは常時電波を出しているわけではなく10mS毎に送信です。スループットの低下が気にならなければ使用してもよいでしょう。

Qメニューをロールオーバーすると詳細が出る表示したい

よろしくお願いします。

メニューをロリポップ(http://lolipop.jp/
)の様に
「ホーム」にマウスを持っていくと「トップページ」「サイトマップ」と詳細が出るようにしたいです。
この仕組みの名前もわからず調べようがなく、
困っております。

Aベストアンサー

ポップアップメニューと言います。

よくある方法ではjavascriptという言語を用いますが、スタイルシートのみで作成も可能です。


人気Q&Aランキング