アップロードするとレイアウトが崩れてしまう

質問

お世話になります。

DW CS3でHPを作成しているのですが、
プレビューやグーグルクロームで確認するとうまくレイアウトされているのに
なぜかアップロードするとレイアウトがひどく崩れてしまいます。

BOMをはずすと解決したという方もいらっしゃいましたが
UTF-8のBOMを含めない設定になっています。

プレビューやグーグルクロームで二重に確認しながらコーディングしているつもりなのに
いざアップすると全く違うレイアウトになっているようでは確認しようがない気がして
困っています。

margineやpadding、widthの設定等が間違っているのではというご指摘もあるかと思いますが
「プレビューやグーグルクロームでは思い通りのレイアウトになっているのに・・・」というのが
いちばん疑問に感じている点です。

どなたか詳しい方ご教授ください。
また、「こういったケースの場合はこの辺を見直してみて」といった
ヒントを下さるととても助かります。

長文申し訳ありません。
お分かりだとは思いますが、当方初心者です。
なにとぞよろしくお願いいたします。

回答No.1

ORUKA1951 · ベストアンサー

すべてテキストモードで転送されていますか？
HTML/CSSの文字コードと、指定があってますか？
スタイルシートは、Shift_JISで作成されているのに、@charsetがUTF-8になっていたとか。
すべての日本語を外してみてください。(font-familyのプロパティも!!)
余分な空白が残ってませんか？
Validatorは・
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_uri )

　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )

お礼

ORUKA1951さん、お返事ありがとうございます。

スタイルシートは、Shift_JISで作成されているのに、@charsetがUTF-8になっていた・・・
これでした、何か意味はよくわからなかったのですが原因はこれだったようです。

検証サービスも便利そうでこれから活用しようと思います。

お世話になりました。

回答No.2

ok-rjak

アップロードしたときに確認しているブラウザはChromeではないのでしょうか？
ローカルとサーバーで、両方ともChromeで確認しているにもかかわらず、サーバー側でのみ表示が崩れるのでしょうか？

コードも、URLもないので憶測でしかお答えできませんが、まず確認するのは、CSSのリンク設定です。

head内に<link>タグでCSSファイルが読み込まれていると思いますが、その読み込み先がちゃんと設定されていますか？
まれに「<link href="C:\Document and Settings\・・・">」などとなっているままアップロードされているページを見かけることがあります。

そうではない場合は、せめてテストアップロードしたURLと、正常にローカルで見えているキャプチャ画像を添付して下さい。
それでお答えできる範囲が広がります。

お礼

ok-rjakさん、お返事ありがとうございます。

無事解決いたしました。どうやら＃１さんのご指摘が原因だったようです。
また、CSSのコーディングもIEの場合クロームと違ってfloatを使った場合の注意点などもあったりしてこれも原因だったようです。

「<link href="C:\Document and Settings\・・・">」などとなっているままアップロードされているなんてこともあるのですね。こういったこともこれから注意していきます。

とにかくお忙しいところをご回答くださりありがとうございました。