締切済み

【タグ打ち】Winだと画像表示がおかしいです。

2009/04/06 21:28

お願いします。現在Mac（iMac OS 10.5.4）、テキストエディットmi でホームページを作成中の初心者です。トップページの右下に画像を配置しようと思い、下記のソースを試したのですが自分のMac（Safari）ではキレイに表示されていますが、Win（IE7.0／文字サイズ中でも小でも）だと画像自体が崩れて表示されます。どのように崩れているかというと、例えば縦長のだ円の画像を表示させたいが、真ん中が抜けてただの円の画像になってる、という具合です。 ↓以下ソース。<HEAD>～</HEAD>内に記載してます。足りないものは何でしょうか？ <style type="text/css">  a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #990000; } a:active { color: #990000; } </style> 解りづらくて申し訳ありませんが、ご回答頂きたく。よろしくお願いします。

Ryu_ka
お礼率77% (7/9)

HTML
回答数4
ありがとう数2

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

みんなの回答

reverie013
ベストアンサー率18% (26/143)

2009/04/08 11:53 回答No.4

すみません、書き漏れてました；ちなみにですね、自分の環境(WinXP)で、お見せ頂いたコードそのまま(頭に<html>を書き加えて背景画像を手持ちの物に変えただけ)で試したところ、 IE7ではちゃんと表示されており、Firefox2では内容文の最終行が下ラインという状況で表示されていました。画像自体が変になるという現象は起こっていません。 Firefoxでちゃんと表示されるようになれば万々歳ですね。頑張って下さい。

質問者

お礼 2009/04/09 13:23

そうですか。自宅のWinXPでみると、どうも崩れてるんですよね・・・。他のブラウザでも見てみたほうが良いですね。とりあえず作り直したいと思います。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

reverie013
ベストアンサー率18% (26/143)

2009/04/08 11:44 回答No.3

コードのご提示ありがとうございます。うう～ん。とりあえずまず言えるのが、ちょっとハチャメチャな書き方ですね。；タイトル以前が書かれていないので、DOCTYPEやmetaがどうなっているのかわかりませんが。。。気になる点をいくつか挙げてみますね。(何がどう関与して不具合を起こしているかもわかりませんので……) ・DOCTYPE宣言を書く(書いて無かったらの話) ・HTML内にCSSを書くのなら、metaも書いておく(書いて無かったらの話) ・ をデザイン(余白空け)目的に使わない→marginで・折角CSSで書いているのなら、bgcolorもCSSで。・font要素は非推奨・文章は基本、p要素などブロックレベル要素で囲う etc というわけで、ご自分の書かれたコードをチェッカーに掛けてみて下さい。 http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html お話はまたそれからですね。。。

質問者

お礼 2009/04/09 13:18

ご回答ありがとうございます。う～ん。なるほど、ハチャメチャなのですね。右も左もわからない状態なので、とりあえず書いてくださった問題点を一つずつ解決していこうと思います。チェッカーなんてものがあるのですね。こちらも活用したいと思います。ご親切にどうもありがとうございました。

ログインすると、全ての回答が全文表示されます。

reverie013
ベストアンサー率18% (26/143)

2009/04/07 11:13 回答No.2

状況を再現できるミニマムコードをご提示頂けると、回答し易いです。少なくとも、背景画像の指定方法に問題はないかと思いますが。ちなみに、-->は</style>の直前に書いた方が良いですよ。もしくは外部シートにしてしまうのが一番良いと思います。

質問者

補足 2009/04/07 23:35

ありがとうございます。遅くなりすみません。以下コードです。 <TITLE>タイトル</TITLE> <style type="text/css">  </style> </HEAD> <BODY bgcolor="#CCCC99"> 文字　　 <hr size="5" color="#996633"> ■■□ 文字 □■■ 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字 ■■□ 文字 □■■ 文字文字文字文字 以下、画面にスクロールバーが出るまで （※もう少し文章やリンクが続きますが、基本的に上記と同じものです。） </body> </html> 以上です。長くなってすみません。ミニマムコードとのことですが、どれが原因か解らないので長くなってしまいました。おっしゃられたとおり、-->は</style>の直前に書いてみました。ちなみに、IE7の画面表示を全画面にしたり、一度他のページに飛んでまた戻るとちゃんと右下（一番したまでスクロールしたときの右下）に表示されるようです。よろしいでしょうか？お願いします。

ログインすると、全ての回答が全文表示されます。