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

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

締切り済みの質問

IE7で閲覧した際にCSSで配置した背景画像がずれる

スタイルシートにて、
以下のように設定して背景画像を表示させているのですが、

body
{
font-size: 70%;
line-height: 140%;
word-spacing: 1pt;
margin: 0;
padding: 0;
text-decoration: none;
text-align: center;
letter-spacing: 0.1em;
background-image: url(../images/body_bg.gif);
background-color: #FFFFFF;
background-repeat: repeat-y;
background-position: center top;
}

マックのsafari、firefox、WINのIE6、firefox等では問題なく
センターに背景画像が配置されて表示されるのですが、
IE7で表示すると、横に余分な空白が生じて、
背景画像のみが左のほうにずれてしまいます。
おおよそですが、bodyの横幅が右に2倍に
増えている感じで、スクロールバーを右に動かすと、
意味のない空白ができています。

IE7のハックというものを使用して、上記のbodyタグの下に
背景画像の設定を外した、下記の記述を追記し、
さらに、.bodybgというクラスタグで
背景画像を設定してみたのですが、結果は同じでした。

*:first-child+html body {
font-size: 70%;
line-height: 140%;
word-spacing: 1pt;
margin: 0;
padding: 0;
text-decoration: none;
text-align: center;
letter-spacing: 0.1em;
background-color: #FFFFFF;

}
*:first-child+html .bodybg {
background-image: url(../images/body_bg.gif);
background-repeat: repeat-y;
background-position: center top;
}

どうしたら、背景画像のずれが直るのでしょうか?
また、このバグはbodyタグではなく、その他のスタイルが
影響しているのでしょうか?
どなたかご存知の方お教え願えませんでしょうか。
よろしくお願い致します。

投稿日時 - 2009-01-08 21:22:55

QNo.4614689

bed

すぐに回答ほしいです

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

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

回答(1)

ANo.1

body以外のcssの影響ですね。
marginやpadding等をどこかで指定されていると思うのですが・・・
body内の要素にborderを指定してみてどの要素が余白を取っているのか検証されるのが早いのではないかと思います。

投稿日時 - 2009-01-09 00:34:05

あなたにオススメの質問