chromeではbackgroundの画像がずれる

解決済

質問者：lasses
質問日時：2012/09/09 16:58
回答数：2件

はじめまして。
よろしくお願いします。

デザイナーに作ってもらったサイトですが、IEでは正常に表示されるのですが、crhomeやfirefoxでは大幅にずれて表示されます。
作成してもらったデザイナーが連絡が取れなくなった為、なんとか自力で修正しないといけなくなりました。
申し込み欄が大幅にずれているので非常に困っています。
http://www.lasses.jp/

２か所同じパターンでズレが発生するのですが、下のフォームの方を具体的に説明すると
<div class="form_760b">

.form_760b {
background-image: url(../image/form_760b.jpg);
width: 760px;
height: 380px;
background-repeat: no-repeat;
}
となっています。
ここの部分がずれてしまう部分です。
対策方法をお願いします。
よろしくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： outbrave
回答日時：2012/09/09 18:03

まず、互換モードで作成されているので、標準モードに変更します。

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
この２行を下のように変更
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

次に CSS ファイルの修正
form.css の一部を下のように修正

.tbl_form {
/*margin: 120px 310px 0px 50px;*/
padding: 120px 310px 0px 50px;
line-height: 1;
width: 400px;
height: 110px;
}

一度、これで見てください。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
完璧に治りました。
本当に感謝します。

通報する

お礼日時：2012/09/09 18:34

No.2

回答者： ORUKA1951
回答日時：2012/09/09 18:26

IEしたら駄目です。

　そのページは互換モードで起動しますから、IE専用--IEの互換モードです。IE以外のすべてのブラウザでずれます。
DOCTYPEスイッチを書き換えて、標準モードで動かせば、IEでもずれます。
DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )

受け取るときは最低限
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
　でチェック位はしましょう。

　原因は、IEの互換モードでは、その要素のサイズをpadding辺の外側、borderの内側にとることにあります。本来はpadding辺の内側でなければならない。

　tableのmarginを調整(0にして)して、外側のdivのpaddingの値を大きくしてみましょう。
firefox+firebug( https://addons.mozilla.jp/firefox/details/1843 )で修正してみたら、それでまともにはなります。
　しかし、Another HTML-lint の指示に従って、大きな減点項目だけは修正しないとまずいです。

　重大なエラーは
Html Validator ( https://addons.mozilla.jp/firefox/details/249 )
でもチェックできます。