みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

以下のように、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でも意図したように表示される方法はありますか?

投稿日時 - 2009-06-26 16:45:41

QNo.5076459

すぐに回答ほしいです

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

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

投稿日時 - 2009-07-01 21:47:15

お礼

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

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

ありがとうございました。

投稿日時 - 2009-07-14 14:33:34

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問