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

Question

HTML＋CSSでホームページを制作する際、以下のような構成

上部：メインロゴ
中部：コンテンツ（What's newなど）
下部：メニューバー

で、IE7とFireFoxで表示違いの差が発生してしまいます。
IEだと問題なく表示されるのですが、FireFoxで表示した場合、
・中部のWhat's newが表示されない
・下部メニューバーが上部メインロゴの右側に表示されてしまう
などの表示の問題が発生します。

CSSファイル内のソースが問題だというところまでは分かって
いるのですが、一般的にこういった場合、CSS内でページ全体を
構成するfloatの設定がおかしいのでしょうか？

全体のページ構成を決めるCSSタグでIEでもFireFoxでも全体を
崩さず表示を同じにするようなタグがあればご教示ください。

説明が分かりづらくてすみません・・。
（URLを具体的にお教えできれば良いのですが、、）

お分かりであればお願いいたしますm(＿)m

nori_007 · Answer

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

Nii · Answer

下記ページ、及び、リンク先が参考になるかと
http://afiliate.livedoor.biz/archives/50882470.html

abril · Answer

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を使うなどして振り分け）して行くという考え方をお勧めします。

abril · Answer

> もしよろしければ原因をお教えいただけませんでしょうか。
> 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 · Answer

とりあえず回答から。非常に長くなる為、何回かに分けて投稿します。また、失礼ながら苦言は山ほど出てきますので、心してお読み下さい。この検証、予想以上に手間暇がかかりましたので… index.htmlと、参照している3種類のCSS（all.css、foot.css、index.css）を全面的に書き換えてみました。IE7／IE6／Firefox2.0.0.12／Opera9.25 on Windows XPでの表示結果がほぼ同じになる事を確認してあります。できるだけオリジナルのid/class名やマークアップを変えずに…と思っていたのですが、実際に検証してみると、失礼ですがHTML側のコードにあり得ないマークアップ（

ではなく
であったり、
がないのに
で始まっていたり、
の中に
等のブロック要素が含まれていたり、同じidが同一ファイル内で繰り返し呼ばれていたり…）が続出して滅茶苦茶でしたので、やむを得ずHTML側を妥当なマークアップに変更したり、それに伴いidだったものをclassに置き換えてプロパティを設定し直したり、という作業が発生した為、構成がかなり変わっていますので、予めご了承下さい。また、"index.html"に現在表示されていない（コメントタグで隠されているコード）部分に関しては検証していません。CSSの内容も現在アクティブなもののみ記述し、それ以外の部分は全て削除してありますので、それらの部分については復活される際、ご自身で調整・設定し直しをして下さい。また、前回質問してスルーされてしまったCSSの文字コードの件は、無視してオリジナルのままにしてあります。それから、前回の回答でお断りした通り、今回は"index.html"のみに着目している為、all.cssとfoot.cssという他カテゴリと共通するCSSに加えられた大幅な修正は、他カテゴリに確実に影響を及ぼしますので、そちらの調整はご自身でお願い致します（特に#headerと#footerの箇所はマークアップ自体が変更される為、HTML側の修正も必須となります）。【回答その1-1】"index.html"（1/x） ※（省略）と書いたところはコードを短くする為省きましたが、それによりJavaScript関連が無効になっていますので検証される時はオリジナルのコードを入れておいて下さい。＜ここから＞--------------------------------------------------------- 株式会社トーテック会社案内 →【回答その1-2】に続く

abril · Answer

【回答その1-2】"index.html"（2/x）＜ここから＞---------------------------------------------------------

＃＃＃テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト＃＃＃

＜ここまで＞--------------------------------------------------------- →【回答1-3に続く】

abril · Answer

【回答その1-3】"index.html"（3/x）＜ここから＞---------------------------------------------------------

＜ここまで＞--------------------------------------------------------- →【回答1-4に続く】

abril · Answer

【回答その1-4】"index.html"（4/x）＜ここから＞---------------------------------------------------------

＜ここまで＞--------------------------------------------------------- →【回答1-5に続く】

abril · Answer

【回答その1-5】"index.html"（5/5）＜ここから＞--------------------------------------------------------- ＜ここまで＞--------------------------------------------------------- →【回答2に続く】

abril · Answer

【回答その2】"all.css"
＜ここから＞---------------------------------------------------------
/*TOTEC Main HP style-All*/
@charset "Shift_JIS";

body {
margin: 0;
padding: 0;
text-align: center;
background: url(../img_all/screen1.gif) #dddddd;
color: #000000;
font-family: "ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3";
font-size: 10px;
}

a {
text-decoration: none
}
a:link {
color: #6699ff;
}
a:visited {
color: #6699ff;
}
a:active {
color: #cc0000;
}
a:hover {
color: #ff6600;
}

img {
border: none
}

/*wrapper------------------------------*/
#wrapper {
width: 615px;
margin: 0 auto;
padding: 0 25px 20px 25px;
text-align: left;
border: solid 1px #999999;
border-top: none;
background: url(../img_all/pb-gn/head-1.jpg) no-repeat #ffffff;
}

/*header------------------------------*/
#header {
height: 115px;
margin: 0;
padding: 0;
}

#header-vi {
height: 70px;
margin: 0;
padding: 0;
line-height: 0;
}

h1#vi {
float: left;
margin: 0;
padding: 0;
line-height: 0;
}

#header-frame {
width: 190px;
height: 50px;
float: right;
}

ul#hn-link {
width: 188px;
height: 20px;
list-style: none;
margin: 5px 2px 0 0;
padding: 0;
border-bottom: solid 1px #666666;
}
ul#hn-link li {
float: left;
margin: 0 10px 0 0;
padding: 0;
}

ul#hn-link li a {
display: block;
height: 20px;
background-repeat: no-repeat;
}
ul#hn-link li#link-1 a {
width: 33px;
background-image: url(../img_all/pb-home-off.gif);
}
ul#hn-link li#link-2 a {
width: 45px;
background-image: url(../img_all/pb-sitemap-off.gif);
}
ul#hn-link li#link-3 a {
width: 63px;
background-image: url(../img_all/pb-question-off.gif);
}
ul#hn-link li#link-1 a:hover {
background-image: url(../img_all/pb-home-on.gif);
}
ul#hn-link li#link-2 a:hover {
background-image: url(../img_all/pb-sitemap-on.gif);
}
ul#hn-link li#link-3 a:hover {
background-image: url(../img_all/pb-question-on.gif);
}

ul#hn-link li em {
display: none;
}

/*pandust------------------------------*/
#frame-pandust {
color: #000000;
padding-top: 5px;
line-height: 120%;
}

#pandust-1{
display: inline;
letter-spacing: 0.1em;
font-size: 11px;
}

/*globalnavi------------------------------*/
ul#globalnavi {
height: 40px;
list-style: none;
margin: 0;
padding: 0;
line-height: 0;
border-bottom: solid 5px #3366cc;
}
ul#globalnavi li {
float: left;
margin: 0;
padding: 0;
}
＜ここまで＞---------------------------------------------------------

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

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

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

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

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

とりあえず回答から。

【回答その1-2】"index.html"（2/x）

【回答その1-3】"index.html"（3/x）

【回答その1-4】"index.html"（4/x）

【回答その1-5】"index.html"（5/5）

【回答その2】"all.css"

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング