IE・FirefoxでのCSS表示違いについて

HTML＋CSSでホームページを制作する際、以下のような構成

上部：メインロゴ
中部：コンテンツ（What's newなど）
下部：メニューバー

で、IE7とFireFoxで表示違いの差が発生してしまいます。
IEだと問題なく表示されるのですが、FireFoxで表示した場合、
・中部のWhat's newが表示されない
・下部メニューバーが上部メインロゴの右側に表示されてしまう
などの表示の問題が発生します。

CSSファイル内のソースが問題だというところまでは分かって
いるのですが、一般的にこういった場合、CSS内でページ全体を
構成するfloatの設定がおかしいのでしょうか？

全体のページ構成を決めるCSSタグでIEでもFireFoxでも全体を
崩さず表示を同じにするようなタグがあればご教示ください。

説明が分かりづらくてすみません・・。
（URLを具体的にお教えできれば良いのですが、、）

お分かりであればお願いいたしますm(＿)m

No.4 回答者： abril 回答日時： 2008/03/09 17:06

> もしよろしければ原因をお教えいただけませんでしょうか。

> http://www.totec-net.com/

本日は申し訳ないのですが、外出先でたまたまレスが入っているのを見てちょっと覗かせて頂いただけですので、検証するに充分な環境と時間がありません（閲覧環境がSafari on Mac OSXのみの為、IE7やFirefox（Fire"F"oxに非ず、ですよ）での表示結果が確認できませんので…）。
ですが…CSSを一瞥しただけでも、骨組みとなるbody、#wrapper、#headerあたりから既にかなり設定に矛盾や非合理性が見受けられました。
※ちなみにこの【ホーム】のコンテンツで参照されている3種類のCSSの文字コードがばらばら（2種類）あるのには何か理由がありますか？奇異な感じがしましたので。
ぱっと見た感じでは、現在の不具合を引き起こしている原因は、プロパティを1箇所直せば良いというレベルではなく、おそらく複数のコンテナブロックのスタイル設定の矛盾が絡み合った結果の様に思われます。もしかして、このCSSは質問者様が最初から手がけたものではなく、他者（例えば前任者）が構築したものを引き継ぎあまり全体を把握されていない状態のままメンテナンスされていらっしゃったりするでしょうか？継ぎ接ぎというか合理性に欠けるというか、そんな印象を受けましたので。質問者様オリジナルのものでしたらこの発言についてはどうぞ失礼をお許し下さい。

明日（月曜）になれば検証する環境と時間がありますので、もし少々お時間を頂けるならトライしてみますが、それより先に他の回答者様が適切な回答を出された場合は、私は今回はスルーさせて頂きます。
それからもし私が検証＆回答をする場合は、この提供頂いたURLの【ホーム】のコンテンツのみの辻褄合わせに限定させて頂きますが、それでもかまいませんか？他カテゴリもSafariで今見せて頂いている結果はかなり悲惨な状況になっているみたいですので、本件の修正をすることで逆に、共通部分を持つ他カテゴリの表示に再調整が必要になる可能性も否めませんので。

この回答へのお礼

abrilさん、

ご親切に本当にどうもありがとうございますm(__)m
非常に助かります・・。

> それからもし私が検証＆回答をする場合は、この提供頂いたURLの【ホーム】のコンテンツのみの辻褄合わせに限定させて頂きますが、それでもかまいませんか？

はい、それをしていただけるだけで充分ありがたさを感じております。
お手数ですが、何卒よろしくお願いいたします。

お礼日時：2008/03/09 20:11

No.3 回答者： abril 回答日時： 2008/03/06 19:04

ANo.2の回答者様が参考に挙げられたURLのサイトを参考に質問者様ご自身で解決されると思いますので、これは直接の回答ではなく、今後の質問の仕方やCSSに対する考え方のアドバイスです。

不要であれば読まないで結構です。
※ちなみに。「CSSタグ」などというものはありません。質問者様がCSSファイル内で定義しているのは、各HTMLタグ／class／idに対して設定するプロパティです。

質問内容が、起きている現象の抽象的な説明だけであり、それを引き起こす元凶があると推定される実際のCSSやHTMLの内容が全く提供されていません。それでは到底原因の追及はできません。

「一般的にこういった場合、CSS内でページ全体を構成するfloatの設定がおかしいのでしょうか？」と問われても、それはケースバイケースです、としか答えられませんよ。float自体がおかしいのではなく、floatと組み合わせて使用している他のプロパティの設定がまずいのかも知れませんし、複数のコンテナブロックのスタイルの相互関係が矛盾しているのかも知れませんし、場合によってはHTMLのマークアップがスタイルを設定されたid/classに対して適切ではないのかも知れませんし…。

回答者にエスパーである事を期待する様な質問をされる方が少なくありませんが、そういう質問の仕方は、結局は速やかに的確な回答を得る事から質問者様を遠ざけてしまっているのだという事を認識して下さい。
この場合であればせめて、最低限の構造が分かるテンプレート部分のHTMLのコードとCSSを提供すべきです。また、ANo.2の回答者様が参考に挙げられたURLのコンテンツにも記載されている様に、DOCTYPE宣言の状態によっても影響が出る場合がありますので、そういう情報も含めて必要でしょう。

> IEだと問題なく表示されるのですが、FireFoxで表示した場合、

別の質問でも書いた事なのですが、CSSに関してはIEはとにかく間違った方向性での独自解釈の傾向が見受けられるブラウザですので、IEでうまく表示されるという事をメインに置いて作成するのではなく、まずできるだけ正しいCSSを書いた上で、IEが正確に解釈できていない部分を調整（場合によってはhackを使うなどして振り分け）して行くという考え方をお勧めします。

この回答へのお礼

abillさん、

下記件、ご回答どうもありがとうございました。
仰る通りですね。。配慮が足りませんでした。
実はURLを貼り付けようと思ったのですが、一度回答してしまった時点で
追加回答できないシステムであることを知りえませんでした・・。
次回以降、気をつけるようにいたします。
アドバイスありがとうございましたm(__)m

そして、教えていただいたサイトも見つつ、いろいろ試してみたのですが
やはり解決しません・・・。
もしよろしければ原因をお教えいただけませんでしょうか。
http://www.totec-net.com/

よろしくお願いいたしますm(__)m

お礼日時：2008/03/08 10:38

No.2 回答者： Nii 回答日時： 2008/03/06 12:38

下記ページ、及び、リンク先が参考になるかと

http://afiliate.livedoor.biz/archives/50882470.h …

この回答へのお礼

Niiさん、情報ありがとうございました。表示の仕方がまとめられてるのですね。参考にさせていただきます。

お礼日時：2008/03/06 13:14

No.1 回答者： nori_007 回答日時： 2008/03/06 12:19

具体的に、HTML(XHTML)と、CSS を表示して頂いた方がコメントが付やすいと思います。

ご検討ください。

この回答へのお礼

ありがとうございます。
貼り付けます(1/4)

@charset "UTF-8";
#Index------------------------------ {}
#mainframe {
width: 615px;
height: auto;
margin-top: 10px;
margin-bottom: 10px;
float: left;
}
#frame_vi {
width: 615px;
height: 200px;
background-color: #FFFFFF;
}
#frame-contents {
width: 100%;
height: auto;
float: left;
background: #FFFFFF;
margin-top: 10px;
}
#frame-l---------- {}
#frame-l {
height: auto;
width: 290px;
float: right;
font-size: 12px;
line-height: 16px;
color: #666666;
}
#navi---------- {}
#frame-navi {
width: 310px;
height: auto;
float: left;
margin-bottom: 20px;
}
#index-comment {
width: 553px;
height: auto;
float: left;
font-size: 13px;
line-height: 16px;
text-align: left;
padding-bottom: 10px;
padding-left: 30px;
color: #666666;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3366cc;
padding-right: 30px;
}
#topics-title {
width: 290px;
height: auto;
float: left;
}
#topics-frame {
width: 278px;
height: auto;
float: left;
border: 1px solid #336699;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
padding-left: 10px;
}
#ul {
height: 150px;
width: 300px;

}
#box-pb-1---------- {}
#box-pb-1 {
height:50px;
width: 310px;
margin-bottom: 5px;
display: block;
float: left;
}
#pb-1-l {
width: 150px;
height: 50px;
float: left;
}

#pb-1-r {
width: 150px;
height: 50px;
float: right;
}

#box-pb-2---------- {}
#box-pb-2 {
height:50px;
width: 310px;
margin-bottom: 5px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #3366cc;
padding-bottom: 5px;
float: left;
}
#pb-2-l {
height:50px;
width: 150px;
float: left;
}

#pb-2-r {
height:50px;
width: 150px;
float: right;
}

お礼日時：2008/03/06 13:07