CSSでのデザイン崩れ改善方法

質問

表示ファイル
http://www.loplopland.com/newfile.html

CSSファイル
http://www.loplopland.com/sample_l_180_490.css

この外部CSSで直したいところは
１．フッターの上の部分に余白ができてしまったので消したい。
２．メイン表示部分が下までバックグラウンドイメージを表示したい。
以上の２点を改善したいんですが、うまくいきません。
どのように直したらいいかご教授下さい。
おねがいします。

回答No.1

rukuku · ベストアンサー

はじめまして

直接の回答ではないのですが、ＣＳＳでのレイアウトはブラウザによってはうまく表示されないことがあります。
多く使われているのがＩＥだけでないのがやっかいです。
ご質問のページですが、私がいつも使っているFirefox3で見たら相当デザインが崩れました。
シェア2位のブラウザですので無視はできないと思います。
http://codezine.jp/article/detail/3119
ＣＳＳだけでは、IEとFirefoxの２つのブラウザでさえ、同じように表示させることがうまくいかなかった経験があります。
結局、テーブルでレイアウトしました。

＞２．メイン表示部分が下までバックグラウンドイメージを表示したい。
background-repeat: repeat-y;
は
背景画像が
http://www.loplopland.com/image/back.gif
であることを考えればちゃんと効いています。
ただし、「main」よりも「side」の方が長いので、「main」の文書のある部分にしか効いていません。
<div class="aaa">
<div class="main">
…
</div>
<div class="side">
…
</div>
</div>
とdivを入れ子にして、aaaの方に「background-repeat: repeat-y;」を設定すればうまくいくのではないかと思います。（背景画像には「side」の幅の分を左に追加してください）
…検証はしていないので確かなことではないのですが。一案としてです。

お礼

２についてはあなたの方法で改善できました。ありがとうございました。
インターネットエクスプローラー以外での表示も検討してみたいと思います。