divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。

質問

divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。

例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。
http://www.dai-ichi-life.co.jp/examine/search/index.html

それには、

<div>○○</div>上用
<div>○○</div>真ん中用
<div>○○</div>下用

のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。

しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。

.box-top {
height: 7px;←画像の高さ
width: 200px;←画像の幅
background-image: url(images/r-menu-box-top.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。

なぜでしょう。

回答No.2

metametamu · ベストアンサー

overflow:hidden;を追加してみるとかどうでしょう
IE互換モード時にはフォントサイズよりボックスの高さを低くできないバグがあった気がします。

補足

回答ありがとうございます。

何とか、解決できました。ここに掲載しませんでしたが、CSSでハックを色々かけていたのが原因だったようです。

＞IE互換モード時にはフォントサイズよりボックスの高さを低くできないバグがあった気がします。

とても参考になりました。今後の参考にします。
ありがとうございます。

回答No.1

noname#100277

確認したブラウザは？
images/r-menu-box-top.jpg自体には何も問題は在りませんか？

補足

早速の返信ありがとうございます！

IE８です。

画像は問題ないとおもいます。CSSで高さと幅も指定しました。
理論上、上記のコーディングで問題ないはずですが、ほかのコーディングに問題があるのでしょうか？