CSSレイアウトによる環境別不具合

質問

最近やっと完全スタイルシートによるコーディングの勉強を初めました
そこで早速環境別のバグの壁にぶち当たってしまいました＞＜
内容は「flortさせた子要素の親ボックスの背景色(背景画像)が表示されない事です。」
過去ログを色々探ってみたのですが色々な方法があり「CSS clearfixハッ
ク」を使用した例や<div style="clear:both;"></div>を使用した例があり試してみたのですがどれも納得のいく解決方法ではありませんでした。

私的な希望としては
--------------------------------------------------
Win→IE/Fire Fox/NN/Opera/Safari/バージョンは
最新のものから1つ前位まで問題なく表示
Mac→IE/Fire Fox/Safari/バージョンは最新のものから
1つ前位まで問題なく表示
ドリームウィーバー上でのプレビューでもレイアウト崩れしない
ジャバスクリプトやCSSハックを使ってのCSSの振り分けは極力避けたい
--------------------------------------------------
以上の条件をクリアーできるような解決方法を探しています。

どなたかアドバイスをいただけると助かります。
下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。
余談ですがこの手のバグで一般的に一番ベストな解決方法はどんな方法なのでしょうか？？

■HTML
http://sangoclip.web.fc2.com/test/
■CSS(レイアウト用)
http://sangoclip.web.fc2.com/test/shared/css/default.css
■CSS(デフォルトCSSクリアー用)
http://sangoclip.web.fc2.com/test/shared/css/reset.css

回答No.1

myahumyahu · ベストアンサー

こんにちは。
Webデザインの仕事をしている者です。

この問題について、やはり一般的な回避方法はｃlearfixを用いる方法だと思います。
clearfixについてもいろいろ使い方があると思いますが、
参考URL、勉強になるかと思います。

また、最も簡単な回避方法は親要素にも同じfloatをかけることではないかと思います。
レイアウト的に、問題ないのであれば、子要素と同じfloatを親要素にもかけてみてはどうでしょうか？

参考URL：

http://norisfactory.com/stylesheetlab/000038.php

お礼

早々のご回答ありがとうございます。
やはりｃlearfixが一番ベストですか実は昨日NN7.1に対応できる
ｃlearfixを見つけましてそれを使用すればなんとか希望の条件に近づきましたので諸々の問題はこの方法で対応しようとおもいます。
ちなみにご指示いただきました「子要素と同じfloatを親要素にかける」やり方は初耳で早速試したみた所結構現実的に使えそうな感じでした＾＾
ありがとうございます。
今後使える場所では使っていこうとおもいます。
今回はアドバイス本当にありがとうございました。
今後製作過程で色々問題が出てくるとおもいますので
その時はまたご質問させていただきますので記事を見つけましたら
アドバイスの程お願いしますね

回答No.3

noname#83877

単純にclearすれば良いのではないでしょうか。

回答No.2

grumpy_the_dwarf

例示のソースは、むやみやたらにDIVで何階層にも分けて意味なく
floatしているから面倒くさいんです。DIVは

wrapper
　├ header
　├ left
　├ right
　└ footer

このくらいシンプルにしてleftとrightだけfloatすればいいじゃな
いですか。main-containerに指定していた背景色はwrapperに指定
して、headerとfooterの背景を別指定しましょう。headerの中身
だって、IMGだけfloatしてれば充分です。ULを幾重にも囲むDIVも
必要なくて、ULのtext-alignを右に変えるだけ。

これで、複雑なハックはまったく不要のはずです。

お礼

早々のご回答ありがとうございます。
確かにそうですね＞＜まさにご指示いただいた通りです。
こうなってしまったのも各ボックスにマージンやらパディングやらボーダーやらを指定する際に直接そのボックスに指定するより囲みは増えますがマージンやらパディングやらボーダーやらを指定する専用の囲みを設けてその囲みに設定した方がいいという記事を見まして。
それに準じてやっていたらこんな感じになってしまいましたｗｗ
やはりなるべくシンプルにした方が問題もおきにくいですし問題箇所も発見しやすいですよね。
今後ダイエットできる箇所はダイエットしてシンプルにしていきたいと思います。