CSSで指定したイメージ位置がブラウザに正しく表示されません。
CSSで指定したイメージ位置がブラウザに正しく表示されません。
OS:Windows7
ブラウザ:IE8,Chrome,Sleipnir(どのブラウザも正しく表示されませんでした。)
とりあえずHTML構文を表記します。
<!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-Style-Type" content="text/css">
<style type="text/css">
<!--
body{
color:#000000;
background:#ffffff url("images/back.gif") repeat-x bottom;
}
-->
</style>
<title>9999</title>
</head>
<body>
<h1>海沿いを走る青島線</h1>
<p>都市と自然が共生するこの沿線は<br>
便利さと安らぎをあなたにお届けします。</p>
<p>ひいらぎ不動産はこの街で<br>
あなたの理想のお部屋探しをサポートします。</p>
</body>
</html>
問題はIE8にあると思い、
IE8をアンインストール(Windows7とIE8はセットのためアンインストール方法が通常と少し違いました。)しましたが、やはりだめでした。
ということはWindows7自体にCSSやHTMLのバージョンについて不具合があるのでしょうか。
ちなみに他のPC(WindowsXP)では問題なくイメージが正確に下に表示されます。
※なんとか自己解決?はできたものの、達成感0です。
body{
color:#000000;
background:#ffffff url("images/back.gif") repeat-x bottom;
}
を
body{
color:#000000;
background:#ffffff url("images/back.gif") repeat-x bottom;
padding-bottom:400px;
}
と
修正したらなんとか本来あるべき位置に画像が表示されました。
最初は400pxじゃなく100%で指定したのですが、
画像がかなり下の方(ページ3個分ぐらい)に表示されてしまったため400pxに直しました。
ですが、やはりこれではすっきりしません。
もっとスマートな解決方法があるのではと思います。
どなたかご教授ください。
お礼
回答ありがとうございました。 他を調べていたら、プロパティのTOPを変更しているところがありました。(再表示時に下方に変更していました) 値を調整しなおしたら直りました。