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

CSSの質問です。DIV要素中に2つのDIV要素を配置しfloatで左右に振り分けると、親のDIV要素に指定した背景画像と背景色が消えてしまいます。下記ソースで言われている「floatのマイナーバグ」によるものだと思うのですが、背景色と背景画像を表示するにはどのような手段があるでしょうか?

http://www.google.com/url?sa=U&start=1&q=http://www.gac.jp/article/index.php%3Fstats%3Dquestion%26category%3D21%26id%3D15494%26command%3Dmsg&e=5926


●質問者: dak
●カテゴリ:コンピュータ
✍キーワード:CSS ソース バグ マイナー 画像
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● cinZano
●10ポイント

http://www7a.biglobe.ne.jp/~sooth/new.html

サンプル

body {

font-family: Verdana, ”MS Pゴシック”, Arial;

font-size: 12px;

color: #333300;

background-image:url(sozai/bg1.gif);

}

#body-box {

margin-right: auto;

margin-left: auto;

width: 740px;

background-color: #FFFFFF;

}

.s{

float:left;

width:100px;

border: 1px solid #000000;

background-color: #ff0000;}

.t{

width:100px;

border: 1px solid #000000;

background-color: #008000;}

普通にこれじゃだめなんですか?

もっと別の意味ですか?

◎質問者からの返答

#body-boxにbodyとは別の背景画像と背景色がが付いていて、.sと.tをfloat指定すると、それが消えてしまうという事です。


2 ● 186
●40ポイント

http://www.quirksmode.org/css/clearing.html

CSS - Clearing floats

http://hail2u.net/blog/webdesign/hail2u-net_on_hatena.html

hail2u.net - Weblog - CSSをはてなに移植してみた

上の二件はoverflowを利用した解決策です。

http://186.bz/hatena/20051001/

はてな20051001_test

実際にサンプルを作ってみました。

IEでは問題ないという事情から、:afterを使った解決策もあります。


具体的なhtmlやcss等はソースをご覧下さい。

◎質問者からの返答

おおっ!サンプルページ、分かりやすいです。取り合えずoverflowを使用する方法を見よう見まねで適用してみて問題解決はできました。

サンプルページでもIEだと違いが分からないですから、Gecko固有の現象のようですね。

一応自分でも一番上のリンクで示されている英文のリソースを読んでみますが、(自分以外を含めた)今後のためにも、どなたかこのテクニックについて日本語でザッと解説して頂けると助かります。解説があった場合、勿論ポイントは付けます。

取り合えずsmoking186さん、どうも有難うございました!


3 ● keijix
●10ポイント

http://blog.y-iweb.com/archives/000178.html

MacIE5で、背景画像が消える:CSSを使いこなす

このことですか?

◎質問者からの返答

うーん。指定されたエントリー自体、原因が良く分からない現象として書いているので、何とも言えません。ただ、IE5固有の現象ではありません。

(と言うか、IE5ではまだ確認いません)

関連質問


●質問をもっと探す●



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