３列コラムのデザインがブラウザによって崩れてしまう

質問

３列コラムのヘッダーフッター構成でページを作ったのですが
ＩＥ８では問題なく表示されるのですが…（Firefox３でも問題なく表示されます）ＩＥ８以下のバージョンのブラウザでは、デザインが崩れてしまうのです…
どこがおかしいのか分からず…ＣＳＳを書き出してみますので、アドバイスよろしくお願いいたします。

デザイン：
●Topページのみ３列コラムで、その他は２列コラムになっています
その為、センター部分を.centと.cent2で分け、横幅を変えて調整しました。。
●フッター部分はナビ部分とコピーライト部分と２つになっています。

.head
{
background-color: #ffffff;
width: 100%;
height: 113px;

}

.main　　（コラム全体）
{
width:100%;
background-color: #ffffff;
border: 0px;

}

.left　　（左コラム）
{
float:left;
width:170px;
background-color: #ffffff;
padding-right: 10px;
}

.cent　　（センターコラム　topのみ）
{
float:left;
width:421px;
padding: 0px 10px 10px 15px;
}

.cent2　　（右コラム　他ページ）
{
float:left;
width:591px;
padding: 0px 15px 10px;
}

.right　　（右コラム　topのみ）
{
float:left;
width:175px;
}

.foot_menu　　（フッターナビ部分）
　　　　　　　{
width:100%;
clear:both;
background-color: #FFFFFF;
　　　　　　　}

.foot　　　　　　（フッターコピーライト部分）
{
clear:left;
height: 42px;
background-image: url(コピーライト用画像);
background-repeat: no-repeat;
}

その他補足が必要な場合はおっしゃって下さい。
よろしくお願いいたします

回答No.2

warez · ベストアンサー

> 横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない
http://adp.daa.jp/archives/000250.html

主にこれですね。

お礼

ご回答ありがとうございました。

何かしら原因がありそうですね。。
このサイトを参考に調べながら解決していきたいと思います。

ありがとうございました！

回答No.4

k0021

指定外でもfloat:left;が効いてしまう事ですか。
デザインが崩た行に<div style="clear:both;">を指定しても直りませんか。
私の参考にしているホームページでは、不明ですがやたらに<div style="clear:both;">を指定していますが。
<div style="clear:both;">は<div class="cle_b">で記述していますが

お礼

ご回答ありがとうございます。

CSSを見させていただきましたが、この使い方はすごいですね；
classが半端ないし、floatの使い方ってこんな使い方なのですか！？

崩れ方ですが…私はIE７のブラウザを見ながら作っていました。(IE８ではなくIE７でした；)
IE6で確認した際に<div>のブロックが全て縦に、左の画面に全てくっついた状態で表示されるのです。。

昨日色々調べていましたが、CSSハックというものが有効なのかなと思いました。
IE6の場合、余白、マージンを大きく解釈されてしまうらしく、
試しに、右側のコラムの余白を“０”にしてみると、直りました。
しかし、firefoxで確認すると、文字が左のコラムに大きく入り込み、文字が読めない状態になってしまいます…

全てのブラウザに対応させるのは難問ですね…＾＾；

回答No.3

ORUKA1951

≫それと、やはりトップページならトップページのＣＳＳ、その他のページならその他のＣＳＳと分けてデザインするべきなのでしょうか。。

　いいえ、一つのサイトだとデザインが統一されていたほうが訪問者には優しいですよね。
　ということは、すべてのページに共通な部分、あるいはあるテーマで共通なもの、そして一つ一つのページで独自なものがあります。

　そこで、次のように作成すると良い
固定スタイルシート
　Default.css　　すべてのページ、メディアで有効なもの
優先スタイルシート
　スクリーン用
　　すべてのページで有効なもの
　　特定のグループで有効なもの★
　　個別のページで有効なもの
代替スタイルシート・・・・・・・・・・・訪問者が選択できるもの。
　　　　　　　　　　　　　　　　　これを選択すると優先スタイルシートは無効になる
メディアごとのスタイルシート・・・・プリント用とか、携帯、PDA、読み上げ用とか

　また、★については、デザインだけと色指定だけと分けておくとメンテナンスが楽

適用のさせ方・・・継承(カスケード)と、詳細度
　table等を除いて、多くのプロパティは親要素から継承される。
　詳細度を比較して、その値によって適用の優先順を判断する。
　それも同じ場合、後出のもので上書きする。

　本当なら、CSSは、参照方式→優先順(セレクタの書き方)→プロパティの書き方の順番で習得すべき。残念ながら、プロパティ書き方だけに熱心なサイトや参考書もありますね。一般的にそういうものは、見栄えだけにこだわり、HTMLやCSSの精神を理解していないというか、そもそも仕様書を読んでいない可能盛大(^^)

【典型的例】
　セレクタを、クラスだけで指定している。そのため、HTMLの中は、classだらけ。
　要素中のclassが一つしか指定していない。class="body memo note"としてけばCSSは楽になるのに・・・

お礼

とても詳しく書いていただいてありがたいのですが…
言葉等…専門的過ぎてまったく理解できません。
私の今の段階の知識では、難しい事を詳しく書かれても分かりません^^；

それに、私のＣＳＳから、なぜ他のブラウザで崩れて見えるのか、直接的な原因を教えてくれていません。。
ＣＳＳの作り方を、ＨＰが出来上がった今説明されてもどうすればいいのか困ってしまいます。
答えの的があまりに外れていて理解しかねます。

質問の仕方がいつも悪いようです…
本当にすみません、貴重な時間を本当にありがとうございました。

回答No.1

ORUKA1951

非効率なCSSですね。わたしなら投げ出す。

今日は無理なので、後日・・・
ヒント)
・CSSは複数使用すること
・IE7以前はブロックの寸法解釈に問題あり
・floatは極力使わない(IE対策)
・カスケード・詳細度を活用する

お礼

ご回答ありがとうございます。

CSSは初心者と言っていいほど、ほどんど理解しきれていません
見る方が見るととても見苦しいＣＳＳなのですね…＞＜
見よう見まねで、手探りなものなので、ＣＳＳのルール、ブラウザのルール等理解しきれていませんでした。。
グダグダなＣＳＳをさらしてしまい、とても恥ずかしいです。

ヒントありがとうございました。
floatは使わない方がいいのですか！？
それ以外の使い方は知りません…

それと、やはりトップページならトップページのＣＳＳ、その他のページならその他のＣＳＳと分けてデザインするべきなのでしょうか。。