人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSに関する質問です。ほぼ丸投げです・・background-colorプロパティについて行き詰りました。

+body
-div#header
-div#content
+div#main
+div#utilities
-div#footer

このような構成のWebページで、div#contentに背景色(#fff)を指定したんですが、bodyに指定している背景画像が塗られてしまいます。IE6で見た際にです。 どうすれば思ったとおりdiv#contentの背景を#fffで塗ることができるでしょうか。

URLは以下のとおりです
http://teto.chicappa.jp/blog/

Movable Typeで公開テンプレート(Vicunaテンプレートといいます)を自己流で弄ったものなので、CSSのソースがとても見づらくなっていると思います。

別に「こうじゃないかな?」というアドバイスでもいいのでよろしくお願いします。

●質問者: melondog
●カテゴリ:ウェブ制作
✍キーワード:background-color BODY CSS FFF IE6
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● wizemperor
●200ポイント ベストアンサー

-div#content

+div#main

+div#utilities

のdiv#mainとdiv#utilitiesがfloatになっていて、clearされていないのが原因ですね(floatした要素は高さの計算に含まれない)。

clearfixという方法を使えば解決します。

div#content:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 visibility: hidden;
}
div#content {
 display: inline-block;
}

/* IE用 \*/
* html div#content {
 height: 1%
}
div#content {
 display:block;
}
/* IE用 */

のようなルールを追加すれば思ったとおりになると思いますよ。

◎質問者からの返答

ありがとうございます!

言われたコードを追加したらIE6でもきちんと表示されました。

はてなでの質問は初めてなので、今からポイントを配分しようと思いますが、失敗したら申し訳ありません。

スピード回答感謝しています。


2 ● tailshade
●10ポイント
div#content

div.content

と書き換えるだけで直るかもしれません。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ