- 締切済み
【タグ打ち】Winだと画像表示がおかしいです。
お願いします。 現在Mac(iMac OS 10.5.4)、テキストエディットmi でホームページを作成中の初心者です。 トップページの右下に画像を配置しようと思い、下記のソースを試したのですが 自分のMac(Safari)ではキレイに表示されていますが、Win(IE7.0/文字サイズ中でも小でも)だと画像自体が崩れて表示されます。 どのように崩れているかというと、例えば縦長の だ円の画像を表示させたいが、真ん中が抜けてただの円の画像になってる、という具合です。 ↓以下ソース。<HEAD>~</HEAD>内に記載してます。足りないものは何でしょうか? <style type="text/css"> <!-- body{ background-image: url(e/top.jpg); background-position: right bottom; background-repeat: no-repeat; } --> a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #990000; } a:active { color: #990000; } </style> 解りづらくて申し訳ありませんが、ご回答頂きたく。 よろしくお願いします。
- みんなの回答 (4)
- 専門家の回答
みんなの回答
- reverie013
- ベストアンサー率18% (26/143)
すみません、書き漏れてました; ちなみにですね、自分の環境(WinXP)で、 お見せ頂いたコードそのまま(頭に<html>を書き加えて背景画像を手持ちの物に変えただけ)で試したところ、 IE7ではちゃんと表示されており、Firefox2では内容文の最終行が下ラインという状況で表示されていました。 画像自体が変になるという現象は起こっていません。 Firefoxでちゃんと表示されるようになれば万々歳ですね。 頑張って下さい。
- reverie013
- ベストアンサー率18% (26/143)
コードのご提示ありがとうございます。 うう~ん。 とりあえずまず言えるのが、ちょっとハチャメチャな書き方ですね。; タイトル以前が書かれていないので、DOCTYPEやmetaがどうなっているのかわかりませんが。。。 気になる点をいくつか挙げてみますね。(何がどう関与して不具合を起こしているかもわかりませんので……) ・DOCTYPE宣言を書く(書いて無かったらの話) ・HTML内にCSSを書くのなら、metaも書いておく(書いて無かったらの話) ・<br>をデザイン(余白空け)目的に使わない→marginで ・折角CSSで書いているのなら、bgcolorもCSSで。 ・font要素は非推奨 ・文章は基本、p要素などブロックレベル要素で囲う etc というわけで、ご自分の書かれたコードをチェッカーに掛けてみて下さい。 http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html お話はまたそれからですね。。。
お礼
ご回答ありがとうございます。 う~ん。なるほど、ハチャメチャなのですね。 右も左もわからない状態なので、とりあえず書いてくださった問題点を 一つずつ解決していこうと思います。 チェッカーなんてものがあるのですね。こちらも活用したいと思います。 ご親切にどうもありがとうございました。
- reverie013
- ベストアンサー率18% (26/143)
状況を再現できるミニマムコードをご提示頂けると、回答し易いです。 少なくとも、背景画像の指定方法に問題はないかと思いますが。 ちなみに、-->は</style>の直前に書いた方が良いですよ。 もしくは外部シートにしてしまうのが一番良いと思います。
補足
ありがとうございます。 遅くなりすみません。以下コードです。 <TITLE>タイトル</TITLE> <style type="text/css"> <!-- body{ background-image: url(e/top.jpg); background-position: right bottom; background-repeat: no-repeat; } a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #990000; } a:active { color: #990000; } --> </style> </HEAD> <BODY bgcolor="#CCCC99"> <BR> <BR> <BR> <font size="4" color="#996633"> <b>文字</b> <hr size="5" color="#996633"> <BR> <font size="1" color="#996633">■■□</font> <font size="3"><b>文字</b></font> <font size="1">□■■</font> <BR> <BR> <font size="2" color="#333333"> 文字文字文字文字文字文字文字文字 <BR> 文字文字文字文字文字文字文字文字文字文字文字文字<BR> 文字文字文字文字文字文字文字文字文字文字文字 </font> <BR> <BR> <BR> <font size="1" color="#996633">■■□</font> <font size="3"><b>文字</b></font> <font size="1">□■■</font> <BR> <BR> <font size="2" color="#000000"> 文字文字文字文字 </font> 以下、画面にスクロールバーが出るまで<BR> (※もう少し文章やリンクが続きますが、基本的に上記と同じものです。) </body> </html> 以上です。長くなってすみません。ミニマムコードとのことですが、どれが原因か解らないので 長くなってしまいました。 おっしゃられたとおり、-->は</style>の直前に書いてみました。 ちなみに、IE7の画面表示を全画面にしたり、一度他のページに飛んでまた戻ると ちゃんと右下(一番したまでスクロールしたときの右下)に表示されるようです。 よろしいでしょうか?お願いします。
提示されたCSSは無関係。 他のHTMLやCSSを提示しないと回答は得られません。
補足
ありがとうございます。すみませんでした。 NO.2の方の回答欄に補足しましたので、そちらをご覧ください。
お礼
そうですか。自宅のWinXPでみると、どうも崩れてるんですよね・・・。 他のブラウザでも見てみたほうが良いですね。 とりあえず作り直したいと思います。 ありがとうございました。