掲示板/JavaScript質問板/過去ログ/一覧/ プルダウンメニューのバグ？

0 名前： ぴろりーな ： 2007/01/12（金） 21:46 ［URL］ ID:01c2TH88: いつも参考にさせていただいております。
今回、どこを調べても解決できない問題がありまして投稿させていただきました。

【現在の状況】
IE7で見た時だけ、プルダウンメニュー内の日本語が縦書きになってしまう。(～IE6、firefox、opera、netscapeでは問題なし)
英語部分は正常に横書きになっています。
URL画像上段のような表示になっています。

【どうしたいのか】
URL画像下段のように、日本語のテキストでもきちんと横書き表示になるようにしたいです。

【何をしたのか】
何もしていません(汗)。
IE6から7にバージョンアップしただけです。

【備考】
サイト立ち上げ時に携わってたわけではないので正確なところは分かりませんが、fireworksでプルダウンメニューを作成すると、mm_menu.jsというファイルが生成されるようです。そのファイル内の一部分を「var itemProps = 'white-space:nowrap';」に変更して問題を解決するという方法を試しましたが、失敗しました。
標準フォントに変えたり、フォントサイズを小さくしたりしましたがどれもうまくいきませんでした。
おそらくサイト立ち上げは2年ほど前かと思われます。

初めての投稿でよく分からないことだらけですので、ソース等何か提示が必要でしたら教えてください。
どなたか解決方法をご存知の方がいらっしゃいましたら、どうかよろしくお願いいたします！

1 名前：匿名： 2007/01/12（金） 21:46 ID:5m2bGK6y: たぶん JavaScript 側の問題ではなく、生成している HTML と CSS 側の問題（特に margin/padding まわり）と思うが、画像だけでは何とも判断できない。

しかし、長々とソースコードを見せられてはこちらも困るので、JavaScript で生成しているのと同等の HTML と CSSを、いったん自分の手で書いてみること。そうすれば適切な CSS プロパティ値を調べやすい。

もしその作業ができないのなら、無関係と思われる部分を少しずつ削って「問題が再現する最小限のソースコード」を作成し、提示すべし。

まず原因の所在を絞り込めなければ、何も始まらない。

2 名前： ぴろりーな ： 2007/01/12（金） 21:46 ID:01c2TH88: 匿名様

レスありがとうございます。

とりあえず、HTMLを少しずついじってみようと思います。marginやpaddingの値を調整してみます。

原因の所在を絞りこむために何を調べたらよいか分からないので、思い当たる部分だけでなく色々調べてみようと思います。

3 名前：匿名： 2007/01/12（金） 21:46 ID:O5ovBGY5: IE6を使用していますが、左上の(テキスト)が、縦表示になってますよ、IE7のせいではないみたいですけど。

4 名前： ぴろりーな ： 2007/01/12（金） 21:46 ［URL］ ID:01c2TH88: 3.匿名様

こちらのURLに貼り付けてあるものは、スクリーンショットで撮った画像を貼り付けただけなので、どのブラウザで見ても表示は同じだと思います。

上段はIE7で見たときの画像、下段はIE6やfirefoxで見た時の画像を貼り付けてあります。

5 名前： ぴろりーな ： 2007/01/12（金） 21:46 ［URL］ ID:01c2TH88: 《訂正》

「fireworksでプルダウンメニューを作成…」と書きましたが、Dreamweaverで作成した時にmm_menu.jsが自動生成されました。
試しにDW8のビヘイビアで「ポップアップメニューを表示」を選択して作成したところ、ファイルが作成されました。しかも、表示等はまったく変わらず…。

解決方法が見つからないため、現在fireworksで作成しております。
多少時間がかかりそうですが、表示に問題はなさそうなのでサイトの全ページを移行するしかなさそうです…。

勉強のため、ご存知の方がいらっしゃいましたら今後も教えていただきたいです。

6 名前：匿名： 2007/01/12（金） 21:46 ID:fqUPSjiv: だから、ソースコードを見ないと、こちらは何とも判断できない。本来は最小限のソースコードが望ましいが、何なら問題が生じるページそのものを見せてほしい。

ヒントとして、Firefox を使っているなら、標準で DOM Inspector がついてくるはず。スクリプト実行後のツリー構造と、各ノードのスタイル情報を確認し、それを元にテスト用 HTML と CSS を書いてみると良い。

まあ、DW のスクリプトが（歴史的な事情もあり）とてつもなく汚いのには同情するが……。

7 名前： ぴろりーな ： 2007/01/12（金） 21:46 ［URL］ ID:01c2TH88: 6.匿名様

レスありがとうございます。

当方の勉強不足で申し訳ありません…。
mm_menu.jsのソースコードを提示したいのですが、どの部分が必要なのか判断がつきません。全体では750行近くありますので全ては無理ですね…。
DWで自動生成されるファイルのようなので、共通する部分はあると思うのですが…。
上何行かを下記に提示します。必要部分がありましたら教えてください。

当方標準ではIEを使っております。firefoxは確認用です。
firefox、opera、netscapeで確認したところ、表示に問題はありませんでした。

-----

/**
* mm_menu 20MAR2002 Version 6.0
* Andy Finnell, March 2002
* Copyright (c) 2000-2002 Macromedia, Inc.
*
* based on menu.js
* by gary smith, July 1997
* Copyright (c) 1997-1999 Netscape Communications Corp.
*
* Netscape grants you a royalty free license to use or modify this
* software provided that this copyright notice appears on all copies.
* This software is provided "AS IS," without a warranty of any kind.
*/
function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh, halgn, valgn, pad, space, to, sx, sy, srel, opq, vert, idt, aw, ah)
{
this.version = "020320 [Menu; mm_menu.js]";
this.type = "Menu";
this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs;
this.fontWeight = "plain";
this.fontFamily = fnt;
this.fontColor = fclr;
this.fontColorHilite = fhclr;
this.bgColor = "#555555";
this.menuBorder = 1;
this.menuBgOpaque=opq;
this.menuItemBorder = 1;
this.menuItemIndent = idt;
this.menuItemBgColor = bg;
this.menuItemVAlign = valgn;
this.menuItemHAlign = halgn;
this.menuItemPadding = pad;
this.menuItemSpacing = space;
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh;
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";
this.submenuXOffset = sx;
this.submenuYOffset = sy;
this.submenuRelativeToItem = srel;
this.vertical = vert;
this.items = new Array();
this.actions = new Array();
this.childMenus = new Array();
this.hideOnMouseOut = true;
this.hideTimeout = to;
this.addMenuItem = addMenuItem;
this.writeMenus = writeMenus;
this.MM_showMenu = MM_showMenu;
this.onMenuItemOver = onMenuItemOver;
this.onMenuItemAction = onMenuItemAction;
this.hideMenu = hideMenu;
this.hideChildMenu = hideChildMenu;
if (!window.menus) window.menus = new Array();
this.label = " " + label;
window.menus[this.label] = this;
window.menus[window.menus.length] = this;
if (!window.activeMenus) window.activeMenus = new Array();
}

8 名前： hideyor ： 2007/01/12（金） 21:46 ［URL］ ID:FCeavE.b: var itemProps = 'white-space:nowrap';

と書かれていますが、

var itemProps = 'white-space:nowrap;';

として書いてみてください。
僕も同じことで悩んでましたので、一緒に考えてみたら出来ました:-)

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

9 名前： ぴろりーな ： 2007/01/12（金） 21:46 ID:01c2TH88: hideyor様

試しにやってみたらできました!!!
たった1つのセミコロンにしてやられた！って感じです…。
本当にありがとうございます。とても勉強になりました。

1つ残念なのは、すでにfireworksで作り直してしまったことです…。
昨日の夜に修正が終わったところでした……。
ただ、今までは1ページに2つ以上のプルダウンメニューが共存できなかったので、最終的に修正する必要はあったのですが…。

何はともあれ解決しました。
みなさま、ありがとうございます。

10 名前： ごっちん ： 2007/01/12（金） 21:46 ［URL］ ID:Vk4wA3ZR: 私も同じことで悩んでました。

わかってよかったです、有難うございました！

11 名前：匿名： 2007/01/12（金） 21:46 ID:Rt.j/.AI

これってつまり、IE7 は

style="white-space: nowrap"

を認識できず、

style="white-space: nowrap;"

でないと駄目ということ？だとしたら、かなり間抜けなバグなんだが。