制作したHTMLとCSSがうまく表示されません・・

質問

3日間色々いじってますが、解決法がわからないため助けてください。
素人なもので、状況説明がわかりづらくてすいません。

WinVistaを使用して、無料テンプレート（配布元：http://pondt.com/内おすすめテンプレート左上　ビルガラス画像のものNo.18を使用）をKompozerで加工しました。
外部cssも使用してますが、フォルダからhtmlを開くと、IEでは正常に表示されますが、firefoxではうまく表示されません。
FFFTPでアップしたHPでは、IE・firefoxそれぞれ違った形に崩れてしまい、うまく表示されません。
（URL　http://i.gmobb.jp/aki_enyce/）
トップページはまだまともに表示されてますが、他ページが崩れています。
外部cssの一部を抜粋して記載します。
本当に困っています。どなたかお教えいただけますでしょうか。
よろしくお願い致します。

≪CSS　各ページ共通部≫
div#wrapper{
margin: 0 auto;
text-align: left;
width: 100%;
line-height: 1.8;
}

div#wrapBg{
border-top: 1px #dedede solid;
background: url(../../../images/haikeimain.jpg) no-repeat top;
}

div#header{
width: 960px;
height: 79px;
margin: 0 auto;
text-align: left;
background: url(../../../images/haikeiheader.jpg) no-repeat top;
}

div#header h1{
float: left;
width: 116px;
margin: 0px 0px 0px 0px;
padding: 0px 0 0 0px;
}

div#header h2{
float: left;
margin-left: 30px;
margin-right: 10px;
padding-top: 20px;
}

div#footer{
text-align: center;
margin-top: 30px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #D3B688;
}

≪トップページ以外の共通ページ（ヘアカタログページを除く）≫

div.wrapBox{

width: 960px;
margin: 0 auto;
padding: 30px 0;
}

div#mainContents{
width: 700px;
float: right;
}

/*---- hair catalog画像 ----*/
div#mainContents div.topicsBox{
float: left;
margin-left: 20px;
margin-bottom: 40px;
}

div#mainContents div.firstItem{
float: left;
margin-left: 30px;
margin-bottom: 40px;
}

/*---- map 画像 ----*/
div#mainContents div.mapBox{
background: url(../../../images/illure/map.png) no-repeat;
width: 695px;
height: 425px;
}

div#leftContents{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: url(../../../images/baner/shiroki.gif) no-repeat top;
width: 200px;
float: left;
padding: 0px;
font-size: 15px;
font-weight: bold;
}

回答No.4

axuaxua · ベストアンサー

３です
Operaは問題無く、Firefoxの問題ですが、index.cssの文字コードのせいか、処理されずレイアウトがずれてます(@charset "Shift_JIS";とあるがUTF8で書かれている、wrapBoxを処理できてない)

mainContentsとleftContentsが左右にずれるのはクラスのfloatがleftとrightだからです
(margin:0;に設定した時、float:left;は左に張り付く、float:right;は右に張り付く）
一番簡単なのは、mainContentsのfloat:right;を解除、margin-leftでLeftContentsの表示スペースを確保し、LeftContents→MainContentsの順にソースを書くことかな？
（自分が作成したサイトはそれで問題が無い）

拡大した時にずれるのは表示した時の画面に入りきらないので下に行ってるだけですが、原因が良くわかりません。div#wrapperにmin-widthを設定していないからかな(所詮素人です）

firefoxのツール→Web開発→開発ツールバーをチェックし、Webコンソールや調査を使うといいです(ただし他ブラウザ用のタグもエラーを出すので注意)

お礼

いろいろご指摘・ご指導いただきましてありがとうございました。

悪い部分が明確にしてくださったので、いろいろ手が打てました。

縮小時の方法を試したのですが、素人のためうまくできなくて・・・
とりあえず、直接head内にwrapBoxの条件指定をしてしまいました。

拡大時の崩れはおっしゃる通りのやり方で直せました！

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

回答No.3

axuaxua

さすがにチェックが面倒なので気付いた点のみ

・文字コードが宣言と違うcssがある
・存在しない（私が知らないだけ？）プロパティが指定されている(例text-align: right bottom)
・アクセス→GoogleMapの画像が右領域を確保しすぎ(Operaで設定して見るとよくわかります）

後はどこまで意図しているのか分からないのでなんとも言えません
(拡大縮小でメニューとコンテンツの隙間が広がるなど）

ほかの回答者の方が出した構文チェックなどで1個1個つぶして下さい

お礼

ご確認いただきましてありがとうございます。
ご指摘いただきました内容チェックしてみます。

特にその拡大・縮小でメニューとコンテンツが広がってしまうのがどうにも直せなくて・・・

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

回答No.2

rukuku

こんばんは

表示の崩れは、HTMLとCSSの両方を全部チェックしないと分かりませんので、
アドバイスだけです。

まずは、記述ミスの確認をしてください。
以下のサイトを使えば、「タグの閉じ忘れ」「スペル間違い」等の単純ながら
場合によっては思った表示にならないミスを簡単に見つけることが出来ます。

HTMLチェック
http://lab2.jp/w3c/htmllint/htmllint.html

CSSチェック
http://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_input

＞IEでは正常に表示されますが、firefoxではうまく表示されません。
ブラウザは、多少の間違いならば、「これは制作者のミスだな」と判断して
修正することがあります。
判断や修正の仕方はブラウザによって違います。そのために、ブラウザによって
思った通りに表示されたり、されなかったりということが起こります。

現在では、IEもFirefoxもきちんとしたHTML&CSSならばきちんと表示されます。
　（IE6には多くのバグがありますが、古いブラウザで製造元のMicrosoftが
　　撲滅運動をしているくらいですから、もし、IE6でうまく表示されなくても
　　気にすることはないと思います。）

＞FFFTPでアップしたHPでは
＞URL　http://i.gmobb.jp/aki_enyce/
を確認しましたが、画像にリンク切れがあります。
リンク切れ画像の扱いはIEとFirefoxで違います。
画像のアップロード忘れを確認してください、
本番用の画像がまだ用意できていないなら、
ダミーとして同じサイズの画像を入れてください。

また、Windowsではファイル名の大文字・小文字を区別しませんが
サーバーのOSは区別することがあります。

お礼

ご丁寧な回答ありがとうございました。
制作途中のページで失礼しました。

とても便利なサイトを教えてくださってありがとうございました。

いろいろ間違いは出てきましたが、トップ以外のページのメニューとコンテンツが拡大縮小で離れてしまうといった致命的な部分がうまく直りませんでしたが、アドバイスをもとに調べてみます。

回答No.1

noname#189156

私のIE9、Chromeでは崩れず表示されましたが。
トップページ、他ページとも・・・

お礼

ご確認ありがとうございます。
ちゃんと表示されましたか・・・

私のほうでもトップページは崩れないのですが、他ページの表示倍率を低くするとfirefox左コンテンツが左、右コンテンツが右によっていってしまい、IEだと更にフッターがヘッダー下近くまで上がってきてしまいます。

これを直そうとずっとがんばっているのですが・・・
私のブラウザのもんだいなのでしょうか？
なんども質問してしまいますいません。