みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画像、safariでは表示、firefoxでは非表示を解決したい。

ブラウザによってかわるという事は承知しておりますが、
タイトルの通り、Safariでは問題なく画像が表示されるのですが、
firefoxでは画像が表示されないという現象があり、
今回どのように解決してよいのかが分かりません。

●サイト
http://project.jpn.org/eternity.html
●問題箇所
各画像の周りの白い部分。

解決法をご存知の方がいらっしゃいましたら、ご指導くださいませ。
どうぞ宜しくお願い致します。

投稿日時 - 2009-01-19 21:42:56

QNo.4644098

暇なときに回答ください

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

他の方も言われていますが、ちょっと作り方の問題ですね。
あと、たしかディレクトリは _ 使えないはずです。back_groundとなっているので、bgimageとかに直してみてください。
それと、haikei.jpgがダウンロードすると常に壊れしまいます。これも原因の一つかもしれません。

ためしに同じ感じで作ってみたので、作り方の違い等見てみてください。
多分編集等しようと思うとある程度覚えることがあると思うので、流す感じで。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta content="eternity and a day, eternity, and, a, day, Megumi, Fukuda, Katsura, Kunieda, garden, project, Berlin, 永遠と一日, ベルリン" name="keywords">
<title>eternity and a day</title>
<style type="text/css"><!--
html,body,p,ul,li {
margin:0;
padding:0;
}

body {
padding:20px 40px;
font-size:small;
background:#ffd7e1;
color:#808080;
}

#GALLERY {
position:relative; top:20px;
height:500px;
margin-bottom:3em;
line-height:1.5;
}

#GALLERY li {
position:absolute;
font-size:x-small;
width:456px;
padding:5px 0 20px 0;
background:url(eternityandaday/bgimage/haikei.jpg) no-repeat 0 0; /* 画像の幅は416pxのままで */
list-style:none;
}

#GALLERY p {
padding:0 20px;
}

#FOOTER {
font-size:medium;
color:#ff7fb4;
line-height:1.5;
white-space:pre;
}

#FOOTER span {
font-size:x-small;
}

--></style>
</head>
<body>
<p>endlich, unseren Platz gefunden.</p>

<ul id="GALLERY">
<li style="left:0;">
<p>14. Apr. 2007</p>
<p><img src="eternityandaday/image/y07m4d14_M18.jpg" alt=""></p>
</li>
<li style="left:500px;">
<p>29. Apr. 2007</p>
<p><img src="eternityandaday/image/y07m4d29_K2.jpg" alt=""></p>
</li>
<li style="left:1000px;">
<p>2007年4月29日</p>
<p><img src="eternityandaday/image/y07m4d29_K5.jpg" alt=""></p>
</li>
</ul>

<p id="FOOTER">Never is the impossible. I like never. I also like always what is there between never and always that links them so indirectly and so intimately. <span>Roni Horn - Rings of lispector (AGUA VITA)</span></p>
</body>
</html>

投稿日時 - 2009-01-20 04:32:02

お礼

回答ありがとうございました。
その通りにやってみたら問題が解決できました。

また、htmlを起こして提示してくださったことによって、まだまだですが基本的な構造の問題が理解できそうです。
ありがとうございました。
大変感謝いたします。

投稿日時 - 2009-01-20 15:49:21

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

無理です。
スタイルシートも使われているようですが、なんであんな無茶苦茶なものが作れるのか・・
【引用】____________ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.html#validate-by-input )]より

☆横スクロールを強いるページは利用できない端末も多い。
 たった数十行で書けるはずが・・400行を超える。・・
 tableなんてまったく不要。

 もう一度、ゼロから学びなおしましょう。

 本当に酷い・・・

投稿日時 - 2009-01-20 00:51:22

お礼

回答ありがとうございます。
めちゃくちゃですね。
相談できる環境もなく、全てが自己流で仕組みを完全に理解出来ていないままいたずらに試行錯誤しているので、恥を忍んでご質問させていただきました。
これから時間をかけて勉強してゆきます。
ありがとうございました。

投稿日時 - 2009-01-20 15:25:56

無駄なTABLEと無駄なDIVの嵐でとても判読しにくいですが、TABLE
に対してbackground属性を指定していますね。background属性は、
body専用なので、TABLEには使えません。表示されないのが正常な
姿です。スタイルシートを使ってください。

ついでにいうと、bodyに指定された属性値の中でonLoad以外に実在
するのはわずかにtextとbgcolorだけで、しかも両方ともスタイル
シートで代用可能なため非推奨です。他の実在しない属性をGoLive
が吐き出すとも思えないので、なにか恐ろしく間違った情報を元に
いじっていると想像します。他にも、MacOSXでGoLiveのスタイルラ
イブラリを使おうとしたらしき情報が、個人情報込みで含まれてい
ますよ。気をつけましょう。

投稿日時 - 2009-01-20 00:32:42

お礼

回答ありがとうございます。
background属性はbody専用なのですね。
本を参考に試行錯誤していたら出来てしまったので、そのまま使ってしまっていました。
ご指摘ありがとうございました。
正しい方法を勉強していかなくてはこのような不備が出て来てしまうという事を痛感いたしました。
これから時間をかけて勉強してゆきます。

投稿日時 - 2009-01-20 15:25:59

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
http://validator.w3.org/

でサイトのエラーチェックしましたが、減点多少の多さに呆れてます。
該当サイトは自分のですか?
ならば、減点に成った箇所を地道に修正しましょう。

其の上で表示に差異が出るならブラウザでの構文チェックの仕様として諦める。
Firefoxは他のブラウザよりも厳格に反映しますから。

投稿日時 - 2009-01-19 23:07:30

お礼

回答ありがとうございます。
このようなサービスがあることも知らない初心者でしたので、驚きました。
今後有効に使って、地道に修正しながら理解してゆこうと思います。
ありがとうございました。

投稿日時 - 2009-01-20 15:04:59

あなたにオススメの質問