Firefoxでの画像表示位置が違う

2014/04/30 01:47

このQ&Aのポイント

HP作成時での質問です、Firefoxでの画像表示位置についてご相談いただきました。
トップページに配置したイメージ画像が、IEとFirefoxで表示位置が異なる現象が発生しています。
スライドショーの動作自体は問題ありませんが、Firefoxでは画像が図の位置に表示されてしまいます。

firefoxでの画像の表示位置が違う

HP作成時での質問です、どうぞ宜しくお願い致します。トップページにイメージ画像を配置し、それをjqueryというjavascriptでスライドショーさせる(計4枚を5秒ずつで切り換え、最後の画像でストップ)ようにしました。作成後、プレビューするとスライドショーそのものの動作確認は問題ありませんでした。が、ブラウザ上での表示位置に違いが出ました。 IEだと何の問題もありません(画像(1))。が、Firefoxだとその画像が図の位置にあるんです(画像(2))。どちらのブラウザでもスライドショーはします。使用したタグの記述としては以下の通りです。 --------------------------------------------------------- 【head内】その(1) <style type="text/css">  </style> その(2) <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> その(3) <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ $(function() { function slideSwitch() { var $active = $('#slideshow img.active'); var $next = $active.next().length ? $active.next() : null; if ($next !== null) { $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active').animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } else clearInterval(intervalID); } var intervalID = setInterval(slideSwitch, 5000); }); </script> --------------------------------------------------------- 【body内(の画像を置きたい場所)】 <TABLE border="0" width="800" height="250" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD <p id="slideshow" valign="middle" width="800" height="250"> <img src="images/top_image01.jpg" class="active"> <img src="images/top_image02.jpg"> <img src="images/top_image03.jpg"> <img src="images/top_image04.jpg"></TD> </TR> </TBODY> </TABLE> --------------------------------------------------------- ※ちなみにこのページをfirefoxでソース表示すると上記body内のこの部分が赤字表示されます。 <TD <p id="slideshow" valign="middle" width="800" height="250"> 見てわかると思いますが上記body内、</p>がありません。メモ帳でtop_image04.jpg">の後に</p>を書いて上書きするのですが、その上でfirefoxで開いてもやはり画像表示位置は違うままです。さらに私は通常ホームページビルダーで作成しているのですが、このソフト上でトップページを開くとエラー検出となり自動修正され、毎回この</p>が消えています。 (しかし</p>が無い状態でもIEでは問題無く正しい位置で表示されています) こういったことも今回の現象と何か関係があるのでしょうか。以上の情報から、何か原因が特定出来るようでしたら、どうかお教え頂きたく存じます。宜しくお願い致します。

love_la_dog
お礼率100% (5/5)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

balloon23
ベストアンサー率69% (16/23)

2014/04/30 18:32 回答No.2

TDの書き出し部分が閉じられていないからとかどうでしょう？　 <TD <p id="slideshow" valign="middle" width="800" height="250"> ↓ <TD><p id="slideshow" valign="middle" width="800" height="250"> 　あと、pタグ内の余分なものはcssに移した方が検証しやすいかもです。 valignとかwidthとかheightとか。

質問者

お礼 2014/04/30 21:27

あまりにあっけない解決に目からとても大きなウロコが落ちました。ものの見事に上手くいきました、素晴らしいです。まさかあんな所を見落とすとは…頭を抱えていた昨日が嘘のようです。 CSSについてもそうですよね。おっしゃるとおりです。基本、ソフト上で視覚的に適当にチャチャッと作っていくだけでタグの事はあまり意識しないので、もっとタグを整理整頓する事を意識していかなければ、と思いました。しかしじつに簡潔明瞭な答えとお優しいアドバイス、本当に助かりました。ありがとうございました。 ※親切にお教え下さったお二方とも、本当に本当にありがとうございました。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/04/30 08:35 回答No.1

高い確率で、＞IEだと何の問題もありません(画像(1))。　ではなく、IEの動作がおかしい。 DOCTYPEを <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 　とIEもウェブ標準で動作するように書き換えてみてください。　そもそもなぜtableを使う必要があるのですか？？「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」　と繰り返し繰り返し言われ続けてきたこと。 <p id="slideshow"> 　<img src="images/top_image01.jpg" class="active"> 　<img src="images/top_image02.jpg"> 　<img src="images/top_image03.jpg"> 　<img src="images/top_image04.jpg"> </p> <style type="text/css">  </style>

質問者

お礼 2014/04/30 21:23

書き忘れていました。一行目の宣言もそのように記述していたのですが、ソフトで開く度にエラー検出＆自動修正でEN">以降が必ず消えるという現象もありました。さて、お教え頂いた通りの記述を全て実行すると上手くいきました。ご丁寧に全ての記述を書いて下さり真にありがとうございます。テーブルについては、そういったセオリーの事など全く知りませんでした。ただただ勉強不足で無知でお恥ずかしい限りです。これまでソフトでの直感的な操作に依存し過ぎて騙し騙しやってきましたが、駄目ですね。基礎の大切さを改めて痛感しました。お教え頂いた事全て、的確かつ今後も作成していく上で必要な事柄として重く受け止めます。ありがとうございました。