ブラウザによって表示がおかしくなります

質問

下記のサイトを参考にしてページを作成したのですが、IEでは通常どおりに説明画像が見れるのに、safariやfirefoxで見ると、説明が像が画面の左上に表示されてしまいます。サイトの内容をコピーしてそのままhtmlに貼付けてアップしても、同じく左上に表示されました。
http://www.sky.sannet.ne.jp/masapine/java_link8.html?

ちなみにこのサイトの見本は、ちゃんとした位置に画像が見れています。

わかりにくい説明ですみませんが、原因や対処方法がわかる方教えてください。よろしくお願い致します。

回答No.2

abril

> 確かにDOCTYPEを消したら正確に表示されました。

えーとですね、ANo.1で申し上げた事のニュアンスが確実に伝わっているかどうか不安ですので念押ししておきますが、「DOCTYPE宣言がされていないHTMLファイル」の元でしか動かないJavaScriptは「正確に表示」されているとは言えない代物です。文書内容に相応しいDOCTYPE宣言をする事は「必須」ですので、決して現状のスクリプトを使いたいからというのを優先して「DOCTYPEを消」す様なまねはなさらないで下さいね。「WEB制作については勉強中」という事でしたら尚更です。

で。

> 見本をコピーしながらでないと作れない現状ですので、まだまだだということを痛感しました。
> 他の方法で表示させるために参考になるサイトなどございましたら教えていただけますでしょうか。

…自力では探せませんか？JavaScriptのサンプル集など、ググれば山ほどヒットする筈なんですが。
申し訳ないのですが「参考になるサイト」を私からお奨めする事は控えさせて頂きます。JavaScript絡みの他のスレッドでもお断りしているのですが、私はJavaScriptマスターではないので、ピンキリで存在するサイトの中から「どれが正確であり汎用性が高いのか」という事を判断する事はできない（私程度の知識ではしたくない）と思っているからです（確かにANo.1中で現状参考にされているサイトに関しては難ありと言わせて頂きましたが、その根拠は明らかにHTMLやCSSの点でかなり「良くない」ものであったから＋内容がかなり古いから、です）。
「勉強中」であるなら尚更、「とりあえずできるだけ自分で検索して調べてみる」という努力をなさって下さい。現状のスクリプトは多分「JavaScript」という1つだけのキーワードでヒットされたリストの最初の方にあったのではありませんか？であれば、今度は一つだけヒントを差し上げます。質問者様のやりたいことの肝になるのは「オブジェクトの表示・非表示の切り替え」です。なので、今度はそういうキーワードを絡めて検索してみるか、より直接的には「JavaScript　obj.style.display="none"」等と入れてみるとかなり核心に近づくと思います（それでいくつか使えそうなサンプルが上位に上がってくる事を確認済みですし、実際にスクリプトを借りてカスタマイズ・検証してOKだったものもあります）。そして今度は必ずサンプルのソースがちゃんと”DOCTYPE宣言をしたHTMLファイル”になっているかを確認して下さい。

それから、別スレッドで「ポップアップの表示位置を個別指定したい」というご要望も併せてある様ですね？ポップアップの個別のスタイルを制御するなら、その部分はCSSにまかせられるタイプの方が楽だと思います。おそらくですが、別スレッドの回答についたレスの内容（「引数」に対応できない）を見る限り、質問者様にはそちらのカスタマイズは難しそうに思えましたので。

あと、ここはJavaScriptのカテなんでこれは蛇足かもしれませんが、実はCSS”だけ”でかなり簡単にこの手の事は実現（ただしIEに対応させるにはJavaScriptも併用になりますが）できたりするのですが、質問者様はCSSについてはどれぐらいご理解をされているのでしょうか？もしそちらがある程度おわかりになる様でしたらCSS側からのアプローチについてアドバイスを差し上げる事も可能ですが…？

下記はCSSだけで制御、もしくは表示位置をCSSで個別指定できるJavaScriptを使用（その場合は<a>にイベントハンドラも入ります）した場合の構造の一例です。
<ul class="hoge">
<li><a href="hoge1.html">リンクhoge1</a>
<p class="pop" id="hoge1">リンクhoge1にマウスオーバーした時のポップアップ。左から50px余白をとった位置に表示。</p>
</li>

<li><a href="hoge2.html">リンクhoge2</a>
<p class="pop" id="hoge2">リンクhoge2にマウスオーバーした時のポップアップ。テキストをセンタリングして表示。<br>ここで改行。</p>
</li>

<li><a href="hoge3.html">リンクhoge3</a>
<p class="pop" id="hoge3">リンクhoge3にマウスオーバーした時のポップアップ。上から20px、左右10pxの余白をとった位置に表示。</p>
</li>
</ul>
もしこのソースを見て、CSSでどの様にスタイルを設定しようとしているのかだいたい想像がつく様でしたら、実際の方法論をご説明させて頂く事も可能です。が、全く見当がつかない様でしたら遠慮させて頂いた方がいいかと思います。

お礼

何度もご説明していただきましてありがとうございます。
abril様のおっしゃる通り、よく調べてみたらDOCTYPEが宣言されていないのは問題外だったのですね。まだまだ勉強が必要でした。
他のJavascriptのサンプルを参考にしてみたいと思います。またご報告させていただきます、ありがとうございました。

回答No.1

abril

最近も似た様なスレッドがあったのですが、参照先の：
http://www.sky.sannet.ne.jp/masapine/java_link8.html?
のコンテンツのソースを見ると、HTMLファイルにDOCTYPEが宣言されていません。DOCTYPEの有無及び種類によって、表示に関する挙動は変わります。

試しに、サンプルのソースをコピーして、参照先と同様にDOCTYPEなしのHTMLファイルで検証してみましたら、IEでもFirefoxでもポップアップの表示位置は同様にリンクの下でした。しかし、某かのDOCTYPE、例えばHTML 4.01 Strictを宣言して再び表示すると、IEの挙動はそのままですがFirefoxでは画面（body）の左上隅にポップアップが出てしまう様になります。この現象は質問者様に起こっているものと同じと思われます（IEの挙動が変わらないのはまあIEが何かと独自解釈の多い悪い意味で特殊なブラウザだから、と思っておいて下さい）。
おそらく質問者様が上記のサンプルを挿入したHTMLファイルには、きちんとDOCTYPEが宣言されているのではありませんか？

といって、参照先の様にDOCTYPE宣言がされていないHTMLファイルなどもってのほかですので、DOCTYPE宣言をした状態で望む挙動をする様に修正する必要があります。実は、DOCTYPE宣言下でのFirefoxの挙動の方が「正しい」のです。何故なら、サンプルのソースではポップアップを表示する位置をCSSで以下の様に設定してあるのですが、
.c1{
position:absolute;
left:0px;
top:0px;
}
これだと、bodyに対しての左の基点0・上の基点0の表示になり、画面の左隅に絶対位置で配置されるのが当然の結果となります。通常こういう様なスタイルであれば親要素に"position: relative;"を設定した上で適用しないと「リンクの下」という相対位置にはなりません。ただし、そうなると、HTML側のマークアップも適切なものに変える必要が出てきますし、それらのマークアップに付随するスタイルもCSSに追加してあげねばなりません。
ただ、参考先のサイトは内容（HTMLもJavaScriptも）も古いですし、先述の様にDOCTYPE宣言なしという致命的な間違いのあるコンテンツを提供しているのも問題外ですし、リンク部分のマークアップも<span>の中に<center>を入れ子にしていたりとレベルの低い文法ミスをしているので、総合的に見てここをお手本にするのはちょっとどうかと…
なので、これを無理やり改良するより、同様の事ができるサンプルスクリプトはいくらでも見つけられますから、他のもっと良いお手本を探し直される事をお奨めします。

お礼

ご丁寧に説明していただきましてありがとうございます。
確かにDOCTYPEを消したら正確に表示されました。

まだWEB制作については勉強中で、見本をコピーしながらでないと作れない現状ですので、まだまだだということを痛感しました。

他の方法で表示させるために参考になるサイトなどございましたら教えていただけますでしょうか。
よろしくお願い致します。