- ベストアンサー
画像、safariでは表示、firefoxでは非表示を解決したい。
ブラウザによってかわるという事は承知しておりますが、 タイトルの通り、Safariでは問題なく画像が表示されるのですが、 firefoxでは画像が表示されないという現象があり、 今回どのように解決してよいのかが分かりません。 ●サイト http://project.jpn.org/eternity.html ●問題箇所 各画像の周りの白い部分。 解決法をご存知の方がいらっしゃいましたら、ご指導くださいませ。 どうぞ宜しくお願い致します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
他の方も言われていますが、ちょっと作り方の問題ですね。 あと、たしかディレクトリは _ 使えないはずです。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>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
無理です。 スタイルシートも使われているようですが、なんであんな無茶苦茶なものが作れるのか・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/validator.html#validate-by-input )］より ☆横スクロールを強いるページは利用できない端末も多い。 たった数十行で書けるはずが・・400行を超える。・・ tableなんてまったく不要。 もう一度、ゼロから学びなおしましょう。 本当に酷い・・・
お礼
回答ありがとうございます。 めちゃくちゃですね。 相談できる環境もなく、全てが自己流で仕組みを完全に理解出来ていないままいたずらに試行錯誤しているので、恥を忍んでご質問させていただきました。 これから時間をかけて勉強してゆきます。 ありがとうございました。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
無駄なTABLEと無駄なDIVの嵐でとても判読しにくいですが、TABLE に対してbackground属性を指定していますね。background属性は、 body専用なので、TABLEには使えません。表示されないのが正常な 姿です。スタイルシートを使ってください。 ついでにいうと、bodyに指定された属性値の中でonLoad以外に実在 するのはわずかにtextとbgcolorだけで、しかも両方ともスタイル シートで代用可能なため非推奨です。他の実在しない属性をGoLive が吐き出すとも思えないので、なにか恐ろしく間違った情報を元に いじっていると想像します。他にも、MacOSXでGoLiveのスタイルラ イブラリを使おうとしたらしき情報が、個人情報込みで含まれてい ますよ。気をつけましょう。
お礼
回答ありがとうございます。 background属性はbody専用なのですね。 本を参考に試行錯誤していたら出来てしまったので、そのまま使ってしまっていました。 ご指摘ありがとうございました。 正しい方法を勉強していかなくてはこのような不備が出て来てしまうという事を痛感いたしました。 これから時間をかけて勉強してゆきます。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://validator.w3.org/ でサイトのエラーチェックしましたが、減点多少の多さに呆れてます。 該当サイトは自分のですか？ ならば、減点に成った箇所を地道に修正しましょう。 其の上で表示に差異が出るならブラウザでの構文チェックの仕様として諦める。 Firefoxは他のブラウザよりも厳格に反映しますから。
お礼
回答ありがとうございます。 このようなサービスがあることも知らない初心者でしたので、驚きました。 今後有効に使って、地道に修正しながら理解してゆこうと思います。 ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
回答ありがとうございました。 その通りにやってみたら問題が解決できました。 また、htmlを起こして提示してくださったことによって、まだまだですが基本的な構造の問題が理解できそうです。 ありがとうございました。 大変感謝いたします。