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

higekuman · Accepted Answer

話は一段落ついたようですが・・・ http://www.totec-net.com/ のソースを拝見しました。 cssの問題以前に、abrilさんもおっしゃっているようにhtmlのマークアップがひどいです。ざっと見ただけでも、・

の中に
がある。　⇒h2要素の中には、インライン要素しか含むことはできません。・同じidがたくさんある。　⇒idは1つしか存在してはいけません。複数の場合はidではなくclassを使います。・
の直下に
ではなく
がある。　⇒
の直下に
を書いて、その中に
を書きます。・
がないのに
がある。　⇒普通では考えられません。もし文字サイズを考えてのことであればスタイルシートで対応します。という感じです。以下のサイトなどで、チェックしてみることをお勧めします。 http://www.w3.org/QA/Tools/#validators └MarkUp Validator └CSS Validator http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

abril · Answer

【回答その5】不具合の原因について＆今後の為の補足通常であれば、「どこがどの様に不適当だったから、この理由によりこの様に修正した」という感じで具体的に指摘するのですが、本件は膨大な量の差し替えが発生した為、総括的な事で終わらせて頂きます。後は、質問者様ご自身で、オリジナルのHTML／CSSと今回の修正版を見比べながら、どこに問題があったのかという事を把握して下さい。＜HTML＞ ■（最初に申し上げた通り）HTMLのマークアップが滅茶苦茶です。タグの意味と特性を正確に理解していない為と思われます。・コーディングしたものを必ず文法チェッカーにかける。そうすれば、

以外は不正であること等はすぐわかります。・論理構造を考えてマークアップする。どれを見出しとして扱い、どれをリストとして扱うか…きちんと論理構造を把握する事で、適切なマークアップが見えてくる様になり、現状の様にひたすら
を入れ子にするという非合理的な構造を整理できます。 ※今回の修正版index.htmlも、本当はもっと
を少なくして

abril · Answer

【回答その4】"index.css"
＜ここから＞---------------------------------------------------------
/*TOTEC Main HP style-Index*/
@charset "UTF-8";

/*Index------------------------------*/
/*mainframe------------------------------*/
#mainframe {
width: 615px;
margin: 10px 0;
}

#frame_vi {
width: 615px;
height: 200px;
}

/*frame-contents------------------------------*/
#frame-contents {
display: inline-block;
width: 100%;
margin-top: 10px;
_margin-bottom: -10px;
}
/* hack for IE7 */
*:first-child+html #frame-contents {
margin-bottom: -10px;
}
#frame-contents:after {
content: "";
display: block;
clear: both;
}

#index-comment {
width: 553px;
margin-bottom: 10px;
padding: 0 30px 10px 30px;
line-height: 16px;
text-align: left;
border-bottom: solid 1px #3366cc;
font-size: 13px;
color: #666666;
}

/*frame-l------------------------------*/
#frame-l {
width: 290px;
float: right;
line-height: 16px;
font-size: 12px;
color: #666666;
}

h2.topics-title {
margin: 0;
padding: 0;
line-height: 0;
}

ul.topics-frame {
width: 278px;
list-style: none;
margin: 0;
padding: 5px 0 5px 10px;
border: 1px solid #336699;
}
ul.topics-frame li {
margin: 0.1em 0;
padding: 0 13px 0 15px;
background-repeat: no-repeat;
background-position: 1px 1px;
}
ul.topics-frame li.topics-ao {
background-image: url(../img_all/aicon-ao.gif);
}
ul.topics-frame li.topics-or {
background-image: url(../img_all/aicon-or.gif);
}

/*navi------------------------------*/
#frame-navi {
width: 310px;
margin-bottom: 20px;
}

/*box-pb-1------------------------------*/
#box-pb-1 {
height:50px;
width: 310px;
margin-bottom: 5px;
}
#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;
padding-bottom: 5px;
border-bottom: solid 3px #3366cc;
}
#pb-2-l {
height:50px;
width: 150px;
float: left;
}
#pb-2-r {
height:50px;
width: 150px;
float: right;
}

/*box-pb-3------------------------------*/
#box-pb-3 {
height: 40px;
width: 310px;
}

/*box-pb-txt------------------------------*/
ul#box-pb-txt {
list-style: none;
margin: 0;
padding: 10px 0;
}
ul#box-pb-txt li {
display: inline;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 12px;
color: #555555;
}

ul#box-pb-txt li a {
display: block;
padding: 4px 20px;
border-bottom: solid 1px #cccccc;
color: #555555;
}
ul#box-pb-txt li a:hover {
border-bottom: solid 1px #66cccc;
background: url(../img_all/arrow_blue.gif) 4px 6px no-repeat;
color: #555555;
}
＜ここまで＞---------------------------------------------------------
→【回答5（総括）に続く】

abril · Answer

【回答その3】"foot.css"
＜ここから＞---------------------------------------------------------
/*TOTEC Main HP style-Foot*/
@charset "UTF-8";

/*Foot------------------------------*/
/*footer------------------------------*/
#footer {
width: 615px;
padding-top: 10px;
}

/*lownavi-1------------------------------*/
#footer ul#lownavi-1 {
display: inline-block;
list-style: none;
margin: 0;
padding: 0 0 0 7px;
background: #000000;
}
#footer ul#lownavi-1:after {
content: "";
display: block;
clear: both;
}
#footer ul#lownavi-1 li {
display: block;
width: 100px;
float: left;
margin: 0;
padding: 0;
}
#footer ul#lownavi-1 li a {
display: block;
width: 100px;
padding: 5px 0;
text-align: center;
border-bottom: solid 5px #666666;
background: #000000;
color: #ffffff;
font-size: 10px;
}
#footer ul#lownavi-1 li a:hover {
border-bottom: solid 5px #ffffff;
background: #cccccc;
color: #666666;
}

/*lownavi-2------------------------------*/
#footer #lownavi-2 {
display: inline-block;
margin: 0;
padding: 0;
}
#footer #lownavi-2:after {
content: "";
display: block;
clear: both;
}

/*lownavi-2-1------------------------------*/
#footer ul#lownavi-2-1 {
width: 240px;
float: left;
list-style: none;
margin: 0;
padding: 8px 0 0 20px;
}
#footer ul#lownavi-2-1 li {
display: inline;
margin: 0;
padding: 0;
}

/*lownavi-2-2------------------------------*/
#footer ul#lownavi-2-2 {
width: 240px;
float: right;
list-style: none;
margin: 0 0 0 20px;
padding: 8px 0 0 0;
}
#footer ul#lownavi-2-2 li {
display: inline;
margin: 0 0 0 1px;
padding: 0;
}
#footer ul#lownavi-2-2 li img {
vertical-align: middle;
margin-right: 2px;
}

/*foot-copy------------------------------*/
#foot-copy {
margin: 10px 0 0 0;
padding: 7px 0 0 0;
text-align: center;
border-top: solid 1px #666666;
}

#foot-copy p.corp {
margin: 0;
padding: 0;
font-size: 12px;
}
#foot-copy p.copyright {
margin: 7px 0 0 10px;
padding: 0;
color: #666666;
}
＜ここまで＞---------------------------------------------------------

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;
}
＜ここまで＞---------------------------------------------------------

abril · Answer

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

abril · Answer

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

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

abril · Answer

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

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

abril · Answer

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

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

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

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】に続く

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

話は一段落ついたようですが・・・

【回答その5】不具合の原因について＆今後の為の補足

【回答その4】"index.css"

【回答その3】"foot.css"

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

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

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

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

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

とりあえず回答から。

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

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

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

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