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のソースがとても見づらくなっていると思います。

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

回答の条件
  • 1人2回まで
  • 登録:2007/09/24 17:58:54
  • 終了:2007/09/24 18:21:51

ベストアンサー

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522007/09/24 18:13:20

ポイント200pt

 -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用 */

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

id:melondog

ありがとうございます!

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

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

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

2007/09/24 18:20:46

その他の回答(1件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522007/09/24 18:13:20ここでベストアンサー

ポイント200pt

 -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用 */

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

id:melondog

ありがとうございます!

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

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

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

2007/09/24 18:20:46
id:tailshade No.2

tailshade回答回数14ベストアンサー獲得回数32007/09/24 18:18:36

ポイント10pt
div#content

div.content

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

  • id:wizemperor
    改めて見たらちゃんと表示されていたので、間違えた回答をしてしまったかと思ったら、既に修正済みだったんですね。
    解決とのことでよかったです。

    おそらくfloatとclearプロパティ周りをいじってしまったのが原因だったのでしょう。
    IE6では通常はclearしなくてもちゃんと表示されますので。
  • id:melondog
    申し訳ありません。
    回答をいただいたのに折悪く質問を閉めてしまいポイントの配分ができませんでした。
    教えていただいた方法も試してみます!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません