小山太郎.com

よく忘れてしまうのでメモ。

FireFoxにおいて、背景色がコンテンツ内容に合わせて伸びてくれない現象がよく出る。
以前対応したのに、また忘れてしまったのでメモ。

<div class=”contents”>
  <div style=”float:left”>
    画像やなんでもコンテンツてんこもり
  </div>
</div>
なんてのがあって、contentsのcssを
.contents {
  background: #000000;
}
なんつって背景を黒に塗りつぶすはずが、FireFoxで見ると「黒塗られてねーじゃん！」ってなることがよくある。

どうやら、contents内のデータにfloat:leftなどの指定が入ってると、このような現象になる。

つーわけで解決法。

<div style=”clear:both”></div>空タグを入れろ！

悲しいかな、ドキュメントとビューを切り離すはずが、ビューのデータがHTMLに書き込む必要があるなんて・・・
赤字を追加です。

<div class=”contents”>
  <div style=”float:left”>
    画像やなんでもコンテンツてんこもり
  </div>
<div style=”clear:both”></div>
</div>

当然、こんなんダサダサなので、style=”clear:both”をCSSに.clear { clear:both; }って書いて<div class=”clear”></div>にしましょう。まぁこれでもダサいんだが・・・

前後の記事

関連した記事

• CSSを圧縮して読みづらく＆軽く (0)
• css media print 印刷用にCSSを組む (0)
• 携帯サイトをPCで見る。FireFoxに偏っているが。 (0)
• メルマガ、HTMLメールを作成するソフトThunderbird (0)
• さくらインターネットcron(クローン）でphpを動かす (0)

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 2 ）

1. とおりすがり Says:
   11 月 25th, 2009 at 5:15:51

   空要素を入れるのは良くないので他の方法がいいですよ。
   と、なんとなくたどり着いた古い記事で宣ってみる。

   clearfixっていうのが便利です。

2. 小山太郎＠管理者 Says:
   11 月 25th, 2009 at 23:32:08

   とおりすがりさん、ありがとうございます！
   clearfixというの、知らなかった・・・
   ちょこっと自分でもググってみましたが、よいですねぇ。

   今度サイト作るときは使わせていただきます！

コメント記入欄