こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSについて、OSによる見え方の違いについて質問です。

すみません、一つどうしても分からず質問です。
CSSを使いサイトのページを作っています。
背景画像の関係上、横に3つ(header・main・footer)に割って設定してるのですが、これのmainの部分、各divとも確実な高さは決まっていないので、高さは設定していないのですが、この方法でやると、ファイアーフォックスで背景画像が表示できません。
フィアーフォックスとIE7.0はほぼ同じように見えるので、恐らくIE7.0にも見えてないと思います。(IE6.0は見えます)

↓こんな感じです

<div id="main_haikei"> ←width 100% ここに背景画像を設定しています
<div id="main">  ←width 920 px
<div id="hidari">   ←左側コンテンツ
 <div id="hidari_1">…</div>
 <div id="hidari_2">…</div>
 </div>
<div id="mannnaka">  ←真中コンテンツ
 <div id="mannnaka_1">…</div>
 <div id="mannnaka_2">…</div>
 </div>
<div id="migi>     ←右側コンテンツ
 <div id="migi_1">…</div>
 <div id="migi_2">…</div>
 </div>
</div>
</div>



これはどうして表示できないのでしょうか?
上手い設定の仕方など教えて頂ければ助かります…。

ちなみにhidari.mannnaka.migiはboth設定がしてあります。

投稿日時 - 2008-07-04 14:02:30

QNo.4150640

困ってます

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

高さは通常成り行きになるのが自然ですので特に指定は要りませんし、指定しなければ初期値はautoですからその点は問題ないです。
肝心のCSSが提示されていないので推測ですが、おそらくANo.2の回答者の方が指摘されている通り、コラムの構造・ネーミングからして<div id="hidari"><div id="mannnaka"><div id="migi">あたりにfloatを使用されていて、それが適切な定義になっていないのだと思われます。

これもANo.2様と同じですが、floatに関する挙動はIE6の方が解釈がおかしいのでIE6を基準にされない方がよろしいです。
floatを使用したコラム組に関しては下記のサイトがよくまとめられていて参考になると思いますよ。

【CSSによる段組(マルチカラム)レイアウト講座】
http://www.geocities.jp/multi_column/

ひとつだけ気になったのが:

> ちなみにhidari.mannnaka.migiはboth設定がしてあります。

何せCSSの定義が不明なので推測の域を出ないのですが、もしかして"clear: both;"とfloatを同時に同じボックスのスタイルに設定してたりしますか?

投稿日時 - 2008-07-04 15:40:46

お礼

親切なアドバイスをありがとうございます。早速参考にしたいと思います。
そして気になされていた部分ですが、その通りです。
float設定だけでは上手くいかなかったりしたので…。

投稿日時 - 2008-07-06 22:59:15

ANo.2

0wl

cssの質問なのにどうしてcssが出てこないか謎ですね
mainとmain_haikeiの2重ネーミングも謎です。

多分、floatさせて何かしているのでようが、floatとは浮くことなので高さを持たないのが正しい解釈です。そのあたり、理解されていますか?IEの挙動がcss的にはおかしいので、Operaも同じでしょうね。

ヒントでした。

ワンモアヒント。
お奨めしませんが、「clearfix」という手法の解説を丁寧にされているサイトをご覧になると、どうして背景が表示されないのかわかると思います。それでわからなければ、cssをつまみ食い勉強でなく、体系だって勉強されることをお奨めします。

投稿日時 - 2008-07-04 15:18:44

補足

仰るとおり初心者です。アドバイスありがとうございました。
勉強していきたいと思います。

投稿日時 - 2008-07-06 22:52:43

お礼

御礼を言う場所を間違えました、すみません。
ありがとうございました。

投稿日時 - 2008-07-06 23:03:56

ANo.1

普通に高さは設定してください。
微調整はあとでもできるのですから
高さが無い以上表示されないです。
どうしてもいれたくないならautoでもいれてください。

投稿日時 - 2008-07-04 14:15:33

お礼

アドバイスありがとうございます。分かりました。

投稿日時 - 2008-07-06 22:52:33

あなたにオススメの質問