アップロードするサーバーによってレイアウトが崩れる

締切済

質問者：watermusic333
質問日時：2011/09/09 03:28
回答数：3件

はじめまして。
アップロードするサーバーによってレイアウトが崩れてしまう現象について質問させて下さい。

現在制作しているウェブサイトがあります。
構造は各パーツをHTMLで作成し、PHPでinclude_onceを使用し
各パーツを読み込んで表示させています。

テストサーバーのロリポップでは全く問題なく表示されています。
本番では真っさらなサーバーを契約し、業者さんが全て使用環境に合わせて設定してくれる予定です。
まだ細かい設定前なのですが、ロリポップで問題なく表示されていたデータを
試しにアップロードしてみた所、何故か上部（ヘッダー上）に40px程の空白が出来てしまいます。

ちなみにwrapperに記述しているcssは
#wrapper {
margin:0 auto;
width: 900px;
padding:0;
text-align: left;
}
という感じで上部に空白が出来る感じにはなっていません。

wrapperのすぐ下に入るheaderのcssは下記です。
#header {
width:900px;
padding:0 0 20px 0;
border-top: 2px solid #E95504;
}
こちらもヘッダー下だけに20px空けたいので、そういう設定にしています。

ロリポップでは問題なく表示されているのに
違うサーバーにアップする事でレイアウトが崩れてしまう事ってあるのでしょうか？？？
サーバーは受ける側なので、表示が変わってしまう事があるなんて知らず
このような問題が初めてで戸惑っています...
wrapperやheaderのcssに何か問題ありますでしょうか？？

また業者さんに設定してもらう際、ロリポップと同じ環境に設定して下さい
とお願いしたらこの問題は解決しますでしょうか？？

制作環境はMac OS 10.6.8でDreamweaver MXとmiエディタを使用しています。
動作確認環境はMac Safari/Firefox/Crome Windows Safari/Firefox/IEで
この環境下でロリポップでは問題なく表示されています。

他に必要な情報などありましたら追記しますので、お知らせ下さい。
どうぞご教授宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： hinananana
回答日時：2011/09/09 09:38

CSSで

*{
margin:0;
padding:0;
}

としてみては・・・？
直るかわかりませんが・・・＾＾；

この回答への補足

自己解決しました。
各パーツHTMLのBOMを外したらきちんと表示されるようになりました。
こんな所に落とし穴があったとは・・・
ありがとうございました！

補足日時：2011/09/09 12:24

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！
こちらはすでに適用しているcssのbodyに記載済みです。
でもありがとうございました！

通報する

お礼日時：2011/09/09 12:14

No.2

回答者： ORUKA1951
回答日時：2011/09/09 08:54

それだけの情報では原因は不明です。

私が通常行っているテスト
・HTMLとCSSの文章チェック
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
　The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
　W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
・他のブラウザで検証する
　IEtester(IE6-8のチェック) http://kumacrow.blog111.fc2.com/blog-entry-536.h …
　firefox,googleChrome,Opera,safari
　winLynx( 検索エンジン対策) http://www.google.com/support/webmasters/bin/ans …
・firefox+fireBug( https://addons.mozilla.jp/firefox/details/1843 )で該当するHTMLとCSSの確認・・これが最も便利・・

　公開するウェブサイトは、とりあえずこれらで確認しています。大抵は、どこかで原因は補足できる。

この回答への補足

補足日時：2011/09/09 12:24

通報する

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！
頂いたリストも既にこちらの投稿前に試していました・・・がダメでした。
でもありがとうございました！

通報する

お礼日時：2011/09/09 12:17

No.1

回答者： SAYKA
回答日時：2011/09/09 08:52

件のcssがぶらさがってる上位のcssがどうなってるか　　じゃない？

ただ、css要素以外で考えられるのはサーバプログラム側の「改行コードの扱い」の違いじゃないかな。
ホワイトスペース化したりするために起きる空白が出たり出なかったりって話。
昔、tableでレイアウトを組んでいた時代に　ソースを見やすくするための改行が仇になって空白が表示されてレイアウトが崩れるので涙を呑んで改行を削って　っていうのがあったからその類似かもね。

物は試しにホワイトスペース化される文字(改行含む)を全部削ってみたら判るんじゃないかな。

例：

<html>
　<head>
　　
　</head>
　<body>
　　
　</body>
</html>

↓

<html><head></head><body></body></html>

言ってる意味、これで通じる？