FirefoxとIEでのプルダウンメニュー表示の違い

このQ&Aのポイント
  • ホームページ制作初心者がプルダウンメニューの設置で問題が発生。Firefoxでは表示枠が詰まっており、一部が隠れる状態になっている。IEでは正常に表示されるため、対策方法を模索中。
  • 初心者が作成したプルダウンメニューにおいて、FirefoxとIEで表示の違いが生じている。Firefoxでは表示枠が詰まり、一部が隠れる状態になっているが、IEでは正常に表示されている。対策方法について情報を求めている。
  • 現在ホームページ制作を始めた初心者が、プルダウンメニューの表示に問題を抱えている。Firefoxでは表示枠が詰まっており、一部が隠れる状態になっているが、IEでは正常に表示されている。解決法を教えてほしい。
回答を見る
  • ベストアンサー

firefox ie プルダウンメニュー 表示の食込

ホームページ制作を始めて間もない初心者です。 現在プルダウンメニューの設置でつまずいています。 <select name="select"> <option value="1">質問</option> <option value="2">説明</option> </select> こんな感じのプルダウンメニューを作ったのですが、IEではちゃんと表示されるのですが、FIREFOXだと、なんと表現したらいいのか・・・表示枠が詰まってというか食い込みというか、上記例で、【質問】と表示されるべきところが【 問】のところがちゃんと表示されず部分的に隠れてしまっている状態です。 いろいろ単語を変えたりして検索にかけてみたのですが、FIREFOXでちゃんと表示されるようにする解決法にたどり着けません。お知恵をお貸しください。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

提示されたコードだけを見ても、差異の原因を示唆する様なものはありません。念の為に試してみましたが、私の閲覧環境でのFirefox(ver.2.0.0.12、OSはWindows XP)では別に質問者様のおっしゃる様な現象は起きず、IE6と同様に表示されます。 問題は別の部分にあると考えてよいでしょう。CSSで妙なwidthやfont-sizeを指定されていたりしませんか?あるいは前後のHTMLコーディングに何らかの文法ミスがあってそれに巻き込まれてしまっているとか。IEはとかく文法ミスに対する解釈が緩いので、まともに見えている事自体が間違っている場合もあります。 もう少し、全体像がわかる様に補足してください。質問者様の環境もわかりませんし(Firefoxと言っても、ヴァージョンはいくつか、どのプラットフォームで見ているのか、という事で異なる部分もありますから)。

takahathi
質問者

お礼

abrilさん本当にありがとうございました。解決しました。 一個ずつCSSを消していったら原因は、cssのpadding:0;でした。 *{ margin:0; padding:0; font-size:100%; text-decoration:none; list-style:none; } 参考書を元に作っていたので、cssに原因があるとは、全く気にも留めていませんでした。盲点でした。 それと <select name="select"> <option value="1">質問</option> <option value="2">説明</option> </select> とだけやればすべての人がそういう現象になると思い込んでいたので検証していませんでした。すみません。 環境(windowsxp firefox2.0.0.12 ie7)

関連するQ&A

  • プルダウンメニューの表示について

    お世話になります。 ホームページを作成中ですが、文字の大中小に変更できるように設定したいです。 そこで見つけてきのはプルダウンメニューで、 <form name="puru"> <select name="amu" onchange="fontsize();"> <option>14pt</option> <option>12pt</option> <option selected>10pt</option> </select> </form> これを入れるというものですが、これだとプルダウンメニューの表示は10pt、12pt 14ptという表示に なってしまいます。これを利用して、プルダウンメニューの表示を大中小というふうにできないでしょうか? 回答をお願いします。

  • プルダウンメニューで、選択項目をリンク先でも維持したい。

    javascriptを使用したプルダウンメニューについて質問です。 <form name="form1"> <select name="select" onChange="location=select.options[select.selectedIndex].value"> <option value="a.html#01">A01</option> <option value="a.html#02">A02</option> <option value="a.html#03">A03</option> <option>---------------</option> <option value="b.html#01">B01</option> <option value="b.html#02">B02</option> <option>---------------</option> </select> </form> 2つのページ(a.html、b.html)上部に上記のようなプルダウンメニューを置き、それぞれ相互に行き来できるようにしました。 一応正常に動くのですが、たとえばa.htmlのプルダウンで『B01』を選択してリンク先b.htmlに飛ぶと、プルダウンの選択項目が一番上の『A01』に戻ってしまっています。 b.htmlに飛んだ後も『B01』選択の状態で残したいのですが。 どのようにすればよいのでしょうか・・・ よろしくお願い致します。

  • プルダウンメニューの選択肢の保持について

    こちらにはだいぶお世話になっています。 perlとpostgresを使用してcgiを作成しているのですが、 下記のコードでプルダウンメニューにDBの値を入れて、 DBにデータが追加されてもプルダウンにもデータが追加されているプルダウンメニューを作りました。 $sql="select * from testtable order by code"; $result = $conn -> prepare($sql1); $ref = $result -> execute; while(@ref = $result->fetchrow){ $options.="<option value='$ref[0]'>$ref[1]</option>\n"; } $select="<select name=''>\n<option value=''>選択してください</option>\n$options</select>\n"; print "$select"; データの検索時にこのプルダウンメニューを使っているのですが、選らんだ選択肢を例えばBとして 送信すると、一番上の「選択してください」に戻ってしまします。 これを送信してもその時選択した選択肢を残すやり方を教えて頂けますでしょうか? testtableの中身:      プルダウンメニュー化 |code|name|      |選択してください▼| | 1 | A |         |    A    | | 2 | B |        → |    B    | | 3 | C |         |    C    | | 4 | D |         |    D    |

  • <input>のvalue値をプルダウンメニューから受け取りたいのです

    <input>のvalue値をプルダウンメニューから受け取りたいのですが、Javascriptを使用すれば出来るものでしょうか?もし可能でしたら、そのコードを教えて頂きたいです。 当方htmlとcssが少し出来る程度で、ウェブで調べても分からなかったので質問させていただきました。 以下はソースになります。 プルダウンのソース: <FORM> <SELECT> <OPTION SELECTED>SELECT</OPTION> <OPTION VALUE="AAABBB">A</OPTION> <OPTION VALUE="BBBBBB">B</OPTION> <OPTION VALUE="CCCCCC">C</OPTION> </SELECT> </FORM> ↑上で選択したvalueの値を、↓下の「ここの値」に渡したいです。 inputのソース: <input name="hosted_button_id" value="ここの値" type="hidden"> 宜しくお願いいたします。

  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

  • フレームを使用した複数プルダウンメニュー

    こんにちは。 よくある質問もみたのですが「複数のプルダウンメニュー」「フレームを使ったプルダウン」というのはあるのですが、 フレームを使用して左フレームに複数プルダウン、そこで選んだものを右フレームに表示させるというのが見つかりませんでした。 「複数のプルダウンメニュー」もつくれますし、「別フレームに表示させる」こともできるのですが、 プルダウンを増やしたとたんに動きません。 ネームを変えてもみたのですがうまくいきません。 フレームを二つつくって <FRAMESET cols="35%,65%"> <FRAME src="n_menu.htm" name="manu">←こっちにプルダウンメニュー <FRAME src="n_main.htm"name="main">←こっちに表示 目次のhtmファイルで <SCRIPT LANGUAGE="JavaScript"> function openPage() { var list = document.forms[0].urlList; parent.frames[1].location = list.options[list.selectedIndex].value; } </SCRIPT> </HEAD> <FORM> <SELECT NAME="urlList" onChange="openPage()"> <OPTION SELECTED VALUE="cover1.htm">朝の歌 <OPTION VALUE="1.htm">1番目のページ <OPTION VALUE="2.htm">2番目のページ <OPTION VALUE="3.htm">3番目のページ </SELECT> </FORM> #上記をコピペして増やしてみた↓ <FORM> <SELECT NAME="urlList2" onChange="openPage()"> <OPTION SELECTED VALUE="cover2.htm">夜の歌 <OPTION VALUE="4.htm">4番目のページ <OPTION VALUE="5.htm">5番目のページ <OPTION VALUE="6.htm">6番目のページ </SELECT> </FORM> これだと2本目が表示されません。 どうすればいいか教えていただけないでしょうか?

  • プルダウンのoptionの表示・非表示はできますか?

    JavaScriptを使ってプルダウン操作をしております。 一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか? 下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。 一つ目のプルダウンリスト <select name="formtype" onchange="form_indicate();"> <option value="AAA">あいうえお <option value="BBB">アイウエオ </select> 二つ目のプルダウンリスト <select name="formtype2"> <option value="aaa">ひらがな1 <option value="bbb">ひらがな2 <option value="ccc">カタカナ1 <option value="ddd">カタカナ2 </select>

  • 複数のプルダウンメニューの作り方。

    質問内容に不備があったため再度質問させて頂きます。 前回答えて下さった方には大変ご迷惑をおかけします。 非常に多くのものを奇麗に見せたいのでプルダウンメニューがいいと思い、作りました。 ・Aリスト、Bリスト、Cリスト…とプルダウンメニュー(メニューを選ぶとアンカー先に飛ぶようにしたい)を複数含んだフォームを一つのhtmlに作ったのですが、動作しません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 list.html <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="list.html#a001">A001</option> <option value="list.html#a002">A002</option> <option value="list.html#a003">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="list.html#b001">A001</option> <option value="list.html#b002">A002</option> <option value="list.html#b003">A003</option> </select> </form> <a id="a001" name="a001"></a>A001<br> <a id="a001" name="a002"></a>A002<br> <a id="a001" name="a003"></a>A003<br> <a id="a001" name="b001"></a>B001<br> <a id="a001" name="b002"></a>B002<br> <a id="a001" name="b003"></a>B003<br> あと、このように同じhtml内でのリンクになる場合は、optionのvalueのlist.htmlを省いてもいいのでしょうか? 当方、Javascriptに関してはコピペでしか使えない程度の知識の人間です。 ご指南の程宜しくお願いします。

  • プルダウンメニューのvalue値を連携したい。

    お世話になります。 初心者です。 下記のようなプルダウンメニューがあるのですが、 select name = "no" の1を選んだら その下の select name、 no_1、no_2、no_3、no_4、も 1になるよう、また select name = "no" の2を選んだら その下の select name、 no_1、no_2、no_3、no_4、も 2になるように連携したいのです、 またそれぞれのvalue値をPHPでPOSTしたいのです。 どうやったらできるのかわかりません サンプルプルグラム等でも良いので ご教授の程よろしくお願い致します。 <form name="name_no" id="name_no" method="post" onSubmit="return check()"> <select name = "no"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_1"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_2"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_3"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_4"> <option value = "1">1</option> <option value = "2">2</option> </select> </form> <input type="submit" >

  • プルダウンメニューがIEだとエラー

    買い物かごをプルダウンメニューで作ったのですが、firefoxではちゃんと次のページ(かごに入れて、かごの中身を表示)に行くのに、IEだと、ちゃんとかごに入りません(ショッピングカートに入れられない、とエラーが出る)何故でしょうか? このタグを打っているのですが(タグ紹介のページでコピった)、間違っていますか? <script language="javascript"> <!-- function goToUrl(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url;} } //--> </script> <form method="post"> <select onChange="goToUrl(this)"> <option value="">▽選択してください <option value="http://~">○○ <option value="http://~" >××</select> </form>

    • ベストアンサー
    • HTML