A 回答 (7件)
- 最新から表示
- 回答順に表示
No.7
- 回答日時:
補足、というか蛇足です。
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
- 回答日時:
>tmenu = document.all[tname].style;
そりゃ動かないだろうね。
だってこれ IE特有のscriptだし。
http://www.google.com/search?q=javascript%20docu …
No.5
- 回答日時:
が滅茶苦茶でしたか。
。。ちなみにその文法でも、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さんがググってくれたサイト様を参考に変更してみたところ、4ブラウザとも正常に動作してくれました。
Amentiさんのサイトの注意書きを見たところ、自サイトで使う事自体は特に問題ないようでしたので、こちらを参考にさせていただこうと思っております。(自閉式なところも気にってます^^)
貴重なアドバイスありがとうございました。
No.4
- 回答日時:
> 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
- 回答日時:
>>・実はパスの解釈が違うので位置が正しくない
>パスも間違ってはいない
残念だけどそれを決めるのは回答者じゃないってところがミソね。
例えばcssには
background-image: url("bg1.jpg");
って書いてあったとする。
通常これは"./bg1.jpg"と解釈されるんだけどこの"./"、どこが基準になってるか判る?
その基準の決め方がブラウザで異なっていて場所が誤ってる事になってるんじゃないの?ってこれでは言ってるわけ。
まぁ、base URLは同じ筈だから片方のブラウザで表示されないとか 考えにくいんだけどね・・・。
ところで同じCSS内の画像関係で 問題が起きてるページで表示できてない画像って他にも有る?
そのbackgroundだけ?
程度によってなにがおかしいのかが変わると思う
firefoxはときどきaddonとテーマがぶつかって不具合が起きる事があるからセーフモードで同じか確認してみて。
この回答への補足
今のところCSS内の画像関係はヘッダーの1箇所だけです。
試しに以下のソースで書いてみたところきちんと表示されました。
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
- 回答日時:
肝心のコードが何も提示されて無いので回答は困難ですね。
他にも、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>
_______________________________________________________________
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- ホームページ作成・プログラミング chromeでhttpdを使うと 2 2022/03/23 10:54
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ハイパーリンクに下線を表示す...
-
bodyにidをつける理由は何ですか?
-
googleモバイルがiframeで表示...
-
テキストボックス内にハイパー...
-
ボタンが押されたらWebページの...
-
-css- ページオープン時やリロ...
-
(Javascript)印刷するファイル...
-
スクロールバーのスクロール量...
-
別ページのページ内リンクでの...
-
bodyタグの範囲について
-
<a href="#" …>の意味を教えて...
-
javascriptでalertの文字列をコ...
-
リンク移動先のURLを取得
-
別ファイルのfunctionの読み込み方
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
jqueryでのkeydownイベント発生...
-
二つの関数を一つにまとめるこ...
-
ひとつの外部ファイルに複数の...
-
外部jsファイルの変数に代入す...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
テキストボックス内にハイパー...
-
ボタンが押されたらWebページの...
-
横スクロールを右から左へ・・・
-
WEB上で編集できない、スク...
-
別ページのページ内リンクでの...
-
"mailtoでメールの【氏名】【性...
-
googleモバイルがiframeで表示...
-
bodyにwidth:100%をつける理由は?
-
複数のiframeの読み込みについて
-
インラインフレームの縦幅を、...
-
【HTML】フレームの中央寄せに...
-
WSHでのIE制御について
-
インラインフレーム内のスクロ...
-
「overflow: hidden」ペー ジ内...
-
ページによって表示位置がずれ...
-
DOCTYPEの指定より異なる動き
-
外部ページからハッシュタグ(...
おすすめ情報