• ベストアンサー
  • すぐに回答を!

CSSで設定した背景画像がFirefoxだとズレて表示されます

  • 質問No.5076459
  • 閲覧数357
  • ありがとう数1
  • 回答数1

お礼率 80% (32/40)

以下のように、CSSを設定しました。

-- CSSの内容(抜粋) -------------------------------

H2{
  color:#333333;
  background-image:url(img/title-01.jpg);
  background-repeat:repeat-x;
  padding:3px 25px;
  font-family:"Lucida Sans";
  font-size:medium;
}

-- HTMLの指定 ------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトル</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="info-area">
 <h2>いろはにほへと</h2> ←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている
 <div></div>
 <div></div>
</div>
<div id="main-area">
 <h2>ちりぬるをわか</h2> ←大幅に上方にズレて表示される
 <div></div>
 <div></div>
</div>
…以下省略…


CSSは外部読込にしてあり、HTML内には幅や高さ,色などを指定するタグは一切ありません。
問題の部分に到達するまでのタグは
なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では
問題なく表示されています。
表示が崩れたFirefoxは3.0.11です。

Firefoxでも意図したように表示される方法はありますか?

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

  • 回答No.1
  • ベストアンサー

ベストアンサー率 72% (132/183)

3.0.11でずれを確認できあせんでした。
他の指定が影響しているのではないでしょうか。
実際のソースもh2だけのスタイルでなりますでしょうか。
float指定まわりでカラム落ちしている場合などがよくあります。
お礼コメント
rurineko

お礼率 80% (32/40)

お礼が遅くなり申し訳ないです。

ご指摘いただいたとおり、他の設定が影響していたようです。
CSSファイルを見直し不要な部分を削除し、コードを並べ替えたところ
ズレが生じなくなりました。

ありがとうございました。
投稿日時:2009/07/14 14:33
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ページ先頭へ