はじめまして。
アップロードするサーバーによってレイアウトが崩れてしまう現象について質問させて下さい。
現在制作しているウェブサイトがあります。
構造は各パーツを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で
この環境下でロリポップでは問題なく表示されています。
他に必要な情報などありましたら追記しますので、お知らせ下さい。
どうぞご教授宜しくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
それだけの情報では原因は不明です。
私が通常行っているテスト
・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の確認・・これが最も便利・・
公開するウェブサイトは、とりあえずこれらで確認しています。大抵は、どこかで原因は補足できる。
この回答への補足
自己解決しました。
各パーツHTMLのBOMを外したらきちんと表示されるようになりました。
こんな所に落とし穴があったとは・・・
ありがとうございました!
No.1
- 回答日時:
件のcssがぶらさがってる上位のcssがどうなってるか じゃない?
ただ、css要素以外で考えられるのはサーバプログラム側の「改行コードの扱い」の違いじゃないかな。
ホワイトスペース化したりするために起きる空白が出たり出なかったりって話。
昔、tableでレイアウトを組んでいた時代に ソースを見やすくするための改行が仇になって空白が表示されてレイアウトが崩れるので涙を呑んで改行を削って っていうのがあったからその類似かもね。
物は試しにホワイトスペース化される文字(改行含む)を全部削ってみたら判るんじゃないかな。
例:
<html>
<head>
<!-- -->
</head>
<body>
<!-- -->
</body>
</html>
↓
<html><head><!-- --></head><body><!-- --></body></html>
言ってる意味、これで通じる?
この回答への補足
自己解決しました。
各パーツHTMLのBOMを外したらきちんと表示されるようになりました。
こんな所に落とし穴があったとは・・・
ありがとうございました!
はい、通じます!
わたしも以前、かなり昔ですがtableでレイアウトしてた時代に
同じような問題にぶつかった時がありました。
こちらも試してみましたがやはり改善されませんでした。
でも回答ありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 詳しい方に質問です。 早急に解決したいと思っています。 ポートフォリオをMacBook で作成したと 2 2023/05/12 17:40
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- サーバー 接続・ログインはできているのにメールが送信できない 2 2022/06/27 15:03
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- その他(IT・Webサービス) ホームページにカウント数を表示する 2 2022/10/28 10:37
- IT・エンジニアリング インフラエンジニア(ネットワークエンジニア)の検証業務について教えてください。 インフラ初心者なので 2 2022/06/26 00:08
- その他(開発・運用・管理) WindowsからSSHでサーバーにあるファイルをダウンロードできない…。 3 2022/04/24 11:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
aタグに直接style=""で:hoverを...
-
macとwindowsのレイアウト崩れ...
-
CSSの設定
-
上部の余白を消すには?
-
HTMLフォームのSELECTの幅を一...
-
chromeだけbody直下に空白が開く
-
なぜ左に寄っているの?
-
INPUT TEXT内の文字位置を指定...
-
ウィンドウを狭めても中の表示...
-
テーブルタグを使わず、テーブ...
-
<h1>タグの後の行間を詰めたい。
-
<SELECT>について
-
Dreamweaverで画面サイズを一定...
-
paddingを指定するとwidthやhei...
-
FireFoxで見るとブラウザの幅に...
-
text-alignの解除の方法
-
バーコードのサイズは拡大縮小...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
HTMLフォームのSELECTの幅を一...
-
<h1>タグの後の行間を詰めたい。
-
なぜ左に寄っているの?
-
インラインフレームの表示位置...
-
text-alignの解除の方法
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
端から端まで横線を引きたい
-
FireFoxで見るとブラウザの幅に...
-
macとwindowsのレイアウト崩れ...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
INPUT TEXT内の文字位置を指定...
-
CSSで、height:100%の中央寄せ
-
CSSの設定
-
テキストボックスの様に文字の...
-
フッターだけが真ん中に行って...
-
スタイルシートでh1の属性行間...
おすすめ情報