他ブラウザでの表示の続き

質問

更に質問なのですが、FirefoxのみCSSを使った

background-image: url(○○○);

が表示されないのと、外部ファイルでのjavascriptのツリー表示ができません。
もし宜しければ、アドバイスをお願い致します。

回答No.7

abril

補足、というか蛇足です。
ANo.6の回答者様の書き込みを見て、元サイト（http://javascript.eweb-design.com/0703_tm.html）はdocument.allを使っていてもFirefox上でも動作しているので気になって検索してみましたら、過去に以下の様なスレッドがありました。

http://oshiete1.goo.ne.jp/qa4056203.html

…だそうです。やはり、DOCTYPEの記述の有無によってJavaScriptの挙動が変わる場合がある様です。document.getElementByIdの方を使ったスクリプトが適切の様ですね。

回答No.6

SAYKA

>tmenu = document.all[tname].style;
そりゃ動かないだろうね。
だってこれ　IE特有のscriptだし。

http://www.google.com/search?q=javascript%20document.all%20firefox&hl=ja&lr=

回答No.5

abril

が滅茶苦茶でしたか。。。ちなみにその文法でも、IE・Opera・ Safariではきちんと動作しました。

JavaScriptが「きちんと動作」してるしていないに関わらず、文法は正しくあるべき（正しく書いた上でJavaScriptを実装する）ですので…。

ところで、ANo.4の補足に書かれたソースですが、おそらく拝借したのはこれですね？
http://javascript.eweb-design.com/0703_tm.html

上記サイト上では、FirefoxでもJavaScriptが正常に動作しています。が、上記サイトのコンテンツにはDOCTYPE宣言がありません。試しにソースをコピーしてきてHTML4.01 StrictなりHTML4.01 TransitionalなりのDOCTYPE宣言を付けてみると、確かにFirefoxではJavaScriptが動作しませんでした。つまり、このJavaScriptの記述の仕方が、きちんとDOCTYPE宣言をしたHTML文書の元では不適切なものがあるのでしょう。

質問者様のコンテンツは「FC2ブログ」云々、とおしゃっているところを見ると、HTML4.01 StrictなりHTML4.01 TransitionalなりのDOCTYPE宣言のテンプレートではないですか？いずれししろHTML文書なのにDOCTYPE宣言がない状態にはできない（してはならない）ので、この場合の解決策は、ちゃんとDOCTYPE宣言されたHTML文書下でも動作するJavaScriptに書き換える／その様なサンプルを探し直す事です。

あいにく私はJavaScriptマスターではないので、自分で現在使用されているスクリプトのどこを修正しろ、という的確なアドバイスはできません。
が、「HTML4.01 StrictなりHTML4.01 TransitionalなりのDOCTYPE宣言下で動作するスクリプト」のサンプルはいくらでも見つけられると思います。
例えば：
http://amenti.usamimi.info/treemenu2.html
上記のサンプルを使って検証して見たところ、HTML4.01 StrictでもHTML4.01 Transitionalでも、Firefoxを含めたお望みの環境で支障なく動作しました。
【注】これは「ツリーメニュー」というキーワードでググって数番目に出てきたもので、現在の質問者様のメニューのレイアウトに比較的近くてDOCTYPE宣言が付いたコンテンツ上で動作している、という意味でサンプルとしただけで、特にこれをお奨めしているというわけではありません。また、このスクリプトを自由に使用して良いかどうかも確認していません。
以上の点に気を付けて、ご自分でお好み（且つ使用が許可された）のサンプルを探されては。

ちなみに、HTMLのマークアップはできれば<div>ではなく当初の様な<ul>での（正しい）マークアップの方が理想的です。メニューですので。そのあたりもカスタマイズができそうなサンプルを見つければなお良いと思います。例えば、上記のサンプルの場合、<div>～</div>とマークアップされているところを、そのまま<ul><li>～</li></ul>に置き換えてもJavaScriptには影響しません（大概のサンプルはその様な置き換えは大丈夫な筈です）。

お礼

そうですね、正しい文法で書く事が大切な事ですよね。

DOCTYPE宣言によって動作が左右される事は、自分でも検証してみました。

結果的にabrilさんがググってくれたサイト様を参考に変更してみたところ、４ブラウザとも正常に動作してくれました。

Amentiさんのサイトの注意書きを見たところ、自サイトで使う事自体は特に問題ないようでしたので、こちらを参考にさせていただこうと思っております。（自閉式なところも気にってます^^）

貴重なアドバイスありがとうございました。

回答No.4

abril

> FirefoxのみCSSを使ったbackground-image: url(○○○);が表示されないのと、

こちらは肝心の不具合が出ているソースを提供してもらえないと何ともいませんが、#headerの高さが失われている場合、背景がレンダリングされなくなります。#headerの高さが失われる原因としてよくあるのが、floatを併用していてその処理が正しくない場合です。「本ソース」上では不具合のおきる箇所のCSSとHTMLはどうなっているのでしょう？

> 外部ファイルでのjavascriptのツリー表示ができません。

というのは、
----------------------------------------------------------------------
<ul><a href="javaScript:treeMenu('treeMenu1')"><img src="gif画像" alt="" border="0" /></a>
<div id="treeMenu1" style="display:none">
<li class="○"><a href="html">○○○</a></li>
（省略O
</div>
</ul>
----------------------------------------------------------------------
の箇所の事だと思いますが、これはHTMLの文法が滅茶苦茶なので、Firefoxで表示されないとしたらJavaScriptではなくHTML側の問題だと思います。
<ul>の直接の子要素は<li>以外は不可です。なので、<ul>の直下に挿入されている<a><img></a>と<div></div>は全て間違いです。これではブラウザ側が文書構造を正しく把握する事ができませんので、表示されないのは当然の結果でしょう（IEで表示されるのはそういう点に関して極めて「緩い」からです）。
まずはHTML側を正しい構造でマークアップした上で、それに伴う様なJavaScriptに書き直して下さい。

補足

文法が滅茶苦茶でしたか。。。ちなみにその文法でも、IE・Opera・ Safariではきちんと動作しました。

それで、 Firefoxを下記の文法に修正して試してみまましたが、やはり動作してくれませんでした。

_______________________________________________________________

flag = false;
function treeMenu(tname) {
tmenu = document.all[tname].style;
if(tmenu.display == 'none') tmenu.display = "block";
else tmenu.display = "none";
}
_______________________________________________________________

<a href="javaScript:treeMenu('treeMenu1')"><img src="gif画像" alt="" border="0" /></a>
<div id="treeMenu1" style="display:none">
<a href="html">○○○</a>
<a href="html">○○○</a>
<a href="html">○○○</a>
</div>
_______________________________________________________________

ちなみにこのjavaScriptとHTML文は某サイトのjavaScript集を参考に
使わせていただいたものです。（画像に関しては自分で付け加えました。）

また文法などに誤りなどありましたら、アドバイスよろしくお願いします。

回答No.3

SAYKA

>>・実はパスの解釈が違うので位置が正しくない
>パスも間違ってはいない
残念だけどそれを決めるのは回答者じゃないってところがミソね。

例えばcssには
background-image: url("bg1.jpg");
って書いてあったとする。
通常これは"./bg1.jpg"と解釈されるんだけどこの"./"、どこが基準になってるか判る？
その基準の決め方がブラウザで異なっていて場所が誤ってる事になってるんじゃないの？ってこれでは言ってるわけ。

まぁ、base URLは同じ筈だから片方のブラウザで表示されないとか　考えにくいんだけどね・・・。

ところで同じCSS内の画像関係で　問題が起きてるページで表示できてない画像って他にも有る？
そのbackgroundだけ？
程度によってなにがおかしいのかが変わると思う

firefoxはときどきaddonとテーマがぶつかって不具合が起きる事があるからセーフモードで同じか確認してみて。

補足

今のところCSS内の画像関係はヘッダーの１箇所だけです。

試しに以下のソースで書いてみたところきちんと表示されました。

HTML文書
-------------------------------------------------------------
<html>
<head>
<link href="<%css_link>" rel="stylesheet" type="text/css" />
<title>タイトル</title>
</head>
<body>
<div id="container">
<div id="header">
<p>サンプル</p>
</div>
</div>
</body>
</html>

CSS文書
-------------------------------------------------------------
body{
text-align: center;
}
#container{
width:800;
margin:auto;
}
#header{
width:800;
height: 200px;
background-image: url(今まで表示されないパス);
background-repeat: no-repeat;
}

しかし、本ソースではどうしても表示されません。

セーフモードでも試しました。

回答No.2

noname#100277

肝心のコードが何も提示されて無いので回答は困難ですね。
他にも、Firefox以外のブラウザでの挙動はどうなのかも・・・

補足

以下がjavascriptとHTMLです。
javascriptは外部呼出しです。
今のところ確認したのはIE・Opera・Firefoxだけで、
Firefox以外は正常に動きます。
_______________________________________________________________
flag = false;
function treeMenu(tname) {
tmenu = document.all[tname].style;
if(tmenu.display == 'none') tmenu.display = "block";
else tmenu.display = "none";
}
_______________________________________________________________
<ul><a href="javaScript:treeMenu('treeMenu1')"><img src="gif画像" alt="" border="0" /></a>
<div id="treeMenu1" style="display:none">
<li class="○"><a href="html">○○○</a></li>
<li class="○"><a href="html">○○○</a></li>
<li class="○"><a href="html">○○○</a></li>
</div>
</ul>
_______________________________________________________________

回答No.1

SAYKA

有りそうな要因
・○○○が日本語
・○○○に空白
・○○○に記号("*"とか)
・実はパスの解釈が違うので位置が正しくない

補足

ありがとうございます。

上記の要因に当てはまるものはありませんでした。

パスも間違ってはいないようです。

現に他のブラウザではきちんと表示されます。

javascriptについてはFirefoxが対応していないのでしょうか。。。

FC2ブログのプラグインのフリースペースにソースを書いています。