サイドメニューのロールオーバーにマウスを合わせるとメニューがガクガク動いてしてしまい困っています。ブラウザは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ベストアンサー

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

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

Q
  • カテゴリ名

  • でh2の文字を小さくしたい

    H2の文字を小さくしたいと考えていますが、
    スタイルシートでなかなか再現できません。
    下記のように設定していますが間違いがありますでしょうか?

    xxx.html
    <div id="box-cat">
    <ul>
    <li><h2>カテゴリ名<h2></li>
    <li><h2>カテゴリ名<h2></li>
    </ul>
    </div>

    xxx.css
    #box-cat {
    width:200px;
    }

    #box-cat h2 {
    font-size:11px;
    font-weight:normal;
    }


    お力をお貸し下さい。

    Aベストアンサー

    ★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
    ・どうして<H2>タグなの?→<LI>タグにいろいろと記述すればよいのでは?
     下に2つの解決策を載せます。どうぞ。

    解決策1:
    #box-cat H2{
     MARGIN:0em 0em 0em 2em; ←ここがポイント!
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』と『xxx.html』はそのままで良い。

    解決策2:
    #box-cat2 LI{
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』はそのままで良い。

    ●xxx.html
    <UL id="box-cat">
    <LI>カテゴリ名
    <LI>カテゴリ名
    </UL>

    ・以上です。これで一様、文字は小さくなりました。→私の環境での結果論!

    Qマウスの右クリックがおかしいんです。

    こんにちは。
    マウスの右クリックでコピー&ペーストをよく利用しているのですが
    1週間前程からマウスの右クリックを押すと瞬時に消えてしまうと言う現象になりました。
    そして先ほどからは右クリックを押すとただの白い箱が出るだけになって
    そこを選択すると文字が出てくると言う現象に変わりました。
    何をした覚えもありませんが、何故このような状態になるのでしょうか?
    ご存知の方がいらしたら是非教えてください。

    Aベストアンサー

    補足ありがとうございます。
    どうやらOSの問題みたいですね~
    とりあえずこの辺で探してみてください。

    http://support.microsoft.com/default.aspx?scid=fh;JA;KBHOWTO&sd=GN&ln=JA

    http://winfaq.jp/

    ちなみに右クリックででるメニューは「コンテキストメニュー」って呼ぶらしいです。

    頑張ってくださいヽ(^。^)ノ

    QTARGET=_blankと、

    リンクに触れただけで、別ウインドウを開くには、どうしたら良いんでしょうか?
    <a TARGET=_blank href=""onMouseOver="location.href='リンク先'"></a>
    上は、どこが間違っているのでしょうか?
            

    Aベストアンサー

    <a href="" onMouseOver="window.open('リンク先')">ccc</a>
    とかで良いのでは?

    window.openについての詳細は書籍ネット等々で調べてください。

    Qクリックできない!マウスがおかしい?

    数日前から、なんだかマウスが思ったように動いてくれません。
    ・プルダウンメニューというのでしょうか、下向きの矢印をクリックしてもメニューが出てきてはすぐ引っ込んでしまって選択できない
    ・文章の一部分を選択しようとドラッグしても、全体が選択されてしまったり、単語だけが選択されてしまう
    ・いくつか同時にウィンドウを開けている時、ひとつを×で閉じたいのに、勝手にその他のウィンドウまで閉じられてしまう
    ・・・などなど、数えだしたらきりがありません;;
    パソコンを購入したときについていたマウスをそのまま使っているので、もし新しいのを購入するのだとしたら、どれにすればいいのか分からないのです。マウスって寿命があるんですか?まだ数年しか使っていないのですが・・・。今のこの調子が悪いのは、光学マウスというのでしょうか、下に赤い光が点灯しているタイプです。
    いままでも何度か、上のような症状が出たりはしたのですが、数日で治っていたのでそのまま使い続けていました。でも、さすがにイライラしてきて。マウスがおかしいのかな、と超初心者の私は思っているのですが、もしかして他におかしい部分がある??それすらも分かりません。
    もしこのままのマウスを使い続けるとしたら、どうすれば症状は治まるのでしょうか?買い換えるとしたら、どんなタイプがいくら位で手に入るのでしょうか?それとも、マウスがおかしいのではないのでしょうか?
    パソコン初心者の私に、是非ご教示願います。

    数日前から、なんだかマウスが思ったように動いてくれません。
    ・プルダウンメニューというのでしょうか、下向きの矢印をクリックしてもメニューが出てきてはすぐ引っ込んでしまって選択できない
    ・文章の一部分を選択しようとドラッグしても、全体が選択されてしまったり、単語だけが選択されてしまう
    ・いくつか同時にウィンドウを開けている時、ひとつを×で閉じたいのに、勝手にその他のウィンドウまで閉じられてしまう
    ・・・などなど、数えだしたらきりがありません;;
    パソコンを購入したときについて...続きを読む

    Aベストアンサー

    もちろんマウスも消耗品ですから壊れますよ。
    出来れば誰か知り合いが使っているマトモなマウスを貴方のPCにさして使ってみてほしいです。
    それで何の問題もなく動くようであれば完全にマウスが壊れたと思って頂いて結構です。
    新しく購入する際はお好きなマウスを買ってOKです。安いのでも高いのでもお好きなものをどうぞ。とりあえずお店に行って店員に直接聞いた方が色々と楽だと思います。

    Q と、

    <td></td> と、<td><BR></td>

    ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
    テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
    <td></td> と、<td><br></td> は、
    ブラウザ上ではどちらでもちゃんと表示されるのですが、
    HTML文法的にはどちらが正しいのでしょうか?
    また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

    ※ホームページビルダー、KompoZerの善し悪しは無視してください。

    Aベストアンサー

    文法的にはどちらも正しいです。
    ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
    tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

    Qマウスのクリックとドラッグの動作がおかしい

    現在、二年程前に買ったマウスを使っていますが、動作が変になりました。症状は以下の通りです。

    1.エクスプローラでフォルダをクリックや長押しすると、ダブルクリックしたときと同じようにフォルダが開かれる。
    2.ファイルを複数選ぶとき、Ctrlキーを押しながらクリックや、ドラッグすると途中で選択が外れる。
    3.ブラウザのスクロールバーをドラッグしていると、途中でドロップされる。
    4.フォルダ、ファイルをドラッグして移動出来ない。
    5.お気に入りのURLをドラッグしようとすると、クリックしたようにそのページが開かれる。

    買い替えの時期だとすれば、何か留意すべきことは有りますか?

    Aベストアンサー

    ・シングルクリックで開く設定になっていないか。
    ・マウスユーティリティを使っていないか。
    ・ノートPCだったらタッチパッドを無効にしても症状が出るか。
    ・マウスパッドを変えても同様か。
    ・セーフモードで起動したときも症状が再現するか。

    などを確認した上、やっぱり症状が出るといった場合はマウスの故障っぽいですね。

    Q番号付きリスト(
    1. ・・・
    )の数字を全角に。

    番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角に。

    お世話になっております。
    番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角にしたいのですが、
    そのようなことはできるのでしょうか。

    ご教授ください。よろしくお願いします。

    Aベストアンサー

    HTML5は<li>にvalue属性が持たせれる
    http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
    解釈間違ってるか?
    そこで、ついでにSelectorAPIも使ってjavascriptで

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>test</title>
    <style type="text/css"></style>
    </head>
    <body>
    <ol class="Z_ol">
    <li value="1">aaaa<ol><li>xxx</li><li>yyyy</li></ol></li>
    <li value="2">bbbb</li>
    <li value="3">cccc</li>
    <li value="4">dddd</li>
    </ol>
    <script type="text/javascript">
    var Z=["0","1","2","3","4","5"];
    var Z_li=document.querySelectorAll(".Z_ol > li");
    for (var i=0;i<Z_li.length;i++){
    Z_li[i].style.listStyleType = "none";
    Z_li[i].insertBefore(document.createTextNode(Z[Z_li[i].value]+"."),Z_li[i].firstChild);
    Z_li[i].normalize();
    }
    </script>
    </body>
    </html>

    HTML5は<li>にvalue属性が持たせれる
    http://dev.w3.org/html5/spec/grouping-content.html#the-li-element
    解釈間違ってるか?
    そこで、ついでにSelectorAPIも使ってjavascriptで

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>test</title>
    <style type="text/css"></style>
    </head>
    <body>
    <ol class="Z_ol">
    <li value="1">aaaa<ol><li>xxx</li><li>yyyy</li></ol></li>
    <li value="2">bbbb</li>
    <li value="3">cccc</...続きを読む

    Qマウスの右クリックの動作がおかしい

    過去ログを見たのですが、見つけることができずに、質問させていただきます。

    OSはWin98SE
    IEは6.0

    のノートブックですが、IEで右クリックをすると、前の画面に戻ってしまいます。
    以前は、メニューが表示されていたのですが。
    (Windowsのデスクトップ画面ではメニューがでます。どうも、IEのときだけのようです)

    特別な設定等をした記憶はないのですが、右クリックでメニューを出す設定に戻したいのです。

    どなたか、設定方法のわかる方がいらっしゃしましたら、アドバイスお願いします。

    Aベストアンサー

    問題のありそうなところをチェックしていくと
    (1)マウスの設定の問題(PS/2互換マウスだったら設定ではないと思います)
    (2)マウスドライバーの誤作動
    (3)フリーソフトと相性がわるい
    (4)IEの誤作動
    (5)OSの誤作動
    などですか

    最初にとりあえず再起動を試してね。
    (1)に関しては、前のかたがかいてますので 設定のマウスのところを確認してみてください
    (2)に関しては コントロールパネルのシステムを開いてマウスのところにびっくりマークがでていたらマウスのところをすべて削除して再起動してみてください

    出てなくてもドライバーを削除して再起動してもいいと思います。
    自動的にインストールされるか(ドライバー)されなかったら、ドライバーを入れなおしてください。

    (3)に関しては、最近入れたフリーソフトなどを思い出して削除してみてください。それだけで障害が収まることがあります。
    また、フリーフォントなどで起こることもあります。

    (4)に関してはIEをいったん削除して再インストールしてみてね
    (個人的にはIE6.0はまだ好きになれないけどね)


    (5)それでだめだったらリカバリーするか OSをいれなおしてね
    リカバリーのほうがいいかも

    問題のありそうなところをチェックしていくと
    (1)マウスの設定の問題(PS/2互換マウスだったら設定ではないと思います)
    (2)マウスドライバーの誤作動
    (3)フリーソフトと相性がわるい
    (4)IEの誤作動
    (5)OSの誤作動
    などですか

    最初にとりあえず再起動を試してね。
    (1)に関しては、前のかたがかいてますので 設定のマウスのところを確認してみてください
    (2)に関しては コントロールパネルのシステムを開いてマウスのところにびっくりマークがでていたらマウスのところをすべて削除して再起動してみて...続きを読む

    Q
    の中に さらに
    があるときのSUBMITボタンについて

    今、

    <FORM ACTION="aaa.asp" METHOD="POST" Name="form1">
    <input type="SUBMIT" value="ボタン1">

    <FORM ACTION="bbb.asp" METHOD="POST" Name="form2">
    <input type="SUBMIT" value="ボタン2">
    </FORM>

    </FORM>


    としていて、ボタン2を押すとbbb.aspに
    飛んでほしいのでに、aaa.aspに飛んでしまいます。
    こういう場合どのようにすればよいのでしょうか?

    それぞれのボタンは hidden の値をそれぞれの
    フォームの中の値を渡したいので
    どうしてもSubmitがいいのです。

    Aベストアンサー

    No.4の回答者_Leoですが、分かりにくかったと思いますので、
    全ソースのサンプルを記載しますので、参考にして下さい。
    No.6のyou111111さんと同じく、JavaScriptを使用しています。
    下記をそのまま、新規のhtmlにコピペで使用できますよよヨ。
    本来のサイトが使用しているテキストボックス名は'MT'です。
    -------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">
    <!---gooはEUCキャラクタを使っています--->
    <html>

    <head>
    <title>SAMPLE</title>
    <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script language="JavaScript" type="text/javascript">
    <!--
    //<クリックした時に実行される関数>
    //*** 英和辞書
    function func1(form){
    document.form1.MT.value =form.TXT.value;
    document.form1.submit();
    }
    //*** サーチ
    function func2(form){
    document.form2.MT.value = form.TXT.value;
    document.form2.submit();
    }
    //-->
    </script>
    </head>

    <body>
    <!---実際に画面表示されるフォーム--->
    <form>
    <input type="text" name="TXT" value="Congratulation" size="40"><br>
    <input type="button" onClick="func1(this.form)" value="Eng-JP">
    <input type="button" onClick="func2(this.form)" value="goo">
    </form>

    <!-- 辞書用の仮想フォーム -->
    <form name="form1" method="GET"
    action="http://dictionary.goo.ne.jp/cgi-bin/dict_search.cgi">
    <input type="hidden" name="MT">
    <input type="hidden" name="sw" value="0">
    </form>

    <!--- サーチ用の仮想フォーム --->
    <form name="form2" method="GET"
    action="http://search.goo.ne.jp/web.jsp">
    <input type="hidden" name="MT">
    </form>

    </body>
    </html>

    No.4の回答者_Leoですが、分かりにくかったと思いますので、
    全ソースのサンプルを記載しますので、参考にして下さい。
    No.6のyou111111さんと同じく、JavaScriptを使用しています。
    下記をそのまま、新規のhtmlにコピペで使用できますよよヨ。
    本来のサイトが使用しているテキストボックス名は'MT'です。
    -------------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">
    <!---gooはEUCキャラクタを使っています--->
    <html>

    <head>
    <title>SAM...続きを読む


    人気Q&Aランキング