ＨＰ作成で、safariで閲覧すると、bodyの背景が固定されたままで

質問

ＨＰ作成で、safariで閲覧すると、bodyの背景が固定されたままで全体のデザインが崩れてしまいます。

http://www.equal-825.com

ＩＥで閲覧すると問題はないのですが、safariで確認すると、bodyの背景画像が固定されてしまっていて、センター部分とずれてしまいます。

作成しているデザイン上、bodyの背景と中央部分がつながるように見えないとおかしいので困っています。

現在の設定は

body {
margin : 0px auto;
text-align : center;
background-image : url("img/back-main.jpg");
background-repeat : no-repeat;
　background-position: center top;
}

です。

background-attachment : scroll ;
を入れてみても結果は一緒でした。

すごく簡単な事のようですが、解決しません。
教えてください！

他のブラウザではまだ確認しておりませんが・・・。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

調べてみましたが、
background-positionの行頭に全角スペースが入っていませんか？

CSS文法チェッカー
http://jigsaw.w3.org/css-validator/

> 作成しているデザイン上、bodyの背景と中央部分がつながるように見えないとおかしいので困っています。

文字サイズを大きくするとずれるようです。
こういうのはposition:absoluteで指定する方が確実だと思います。

お礼

ご回答ありがとうございました！！！！

background-positionの行頭に全角スペースが入ってました！
それを取ると、うまく表示できています！
cssのチェッカーがあるんですね。知りませんでした。

ウィンドウを、中央にあるメインdiv　950px　より小さくすると、ズレできます。
これは、中央のdivをなんとかしないとダメですよね？

http://www.equal-825.com

それと、ＩＥでは大丈夫なのですが、上の部分でズレてる箇所が・・・。

上部（div#top）のheight:50px;　をなくすと、safariではうまく表示されるのですが、今度はIEでズレます。

div#top{
width:950px;
height:50px;
padding: 20px 0px 0px 10px;
text-align:left;
font-size : 12px;
color:#4c4c4c;}

今はまたheightを戻しました。ですからsafari ではズレてます。
他にも色々やってみたのですが、何か良いアドバイスがあればお願いします！

私の作り方がおかしいのかもしれませんが、
上の住所などを書いている所は、divで囲っています。
それより下は、メインのdivで囲っているのですが。

回答No.2

yyr446

IE以外は、みんなずれてるでしょう（operaはOKかも）
ずれてる部分はフラッシュの<object>コンテンツですね。
背景画は正しくcenterになってますが、
<object>部が左端に配置されています。
背景の位置を
background-position: left top;
にするのが早道かも．．．

あるいはどこかに text-align:center; が必用なのか、
clear:left;入れるか、

背景をcenter指定してあるので、
<object>をposition:absolute;して
物理位置を計算し、指定するのは困難かと、

いっそ、透明のflashにしてしまうとか、

お礼

ご回答ありがとうございます。

フラッシュを使っていないトップページ以外でもメインのdivが左寄りになっていました。
とりあえず、メインdivは真ん中に揃うようになったのですが、
background-position: left top;にすると、IEでもデザインがずれてしまいます。

確かにメニューなどもgifで透明化するのも手なのですが、やはり綺麗に見せたいですし・・・。

頭をやわらかくして悩んでみます・・・。