- ベストアンサー
背景がずれる
bodyに背景画像を指定しています。 wrapの中のdiv要素にやはり背景画像を指定しています。 このとき、この両方の画像の柄（横直線ラインのもの/X方向のみ繰返し）をきっちり合わせたいのですが、IEとFirefoxではラインが合ってくれません。 IEに合わせようとすると、Firefoxでは1pxほど上にdivの部分が上がってしまいます。 他の要素でPaddingやmarginも使っていません。 合わせる方法はないでしょうか。 まる2日悩んで、色々と検証しましたがホトホト疲れました・・・。教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
bodyのmargin:-1px 0 0 0;は関係ないですか？ firefoxでは指定が反映されないとか。
その他の回答 (2)
＞FFはブラウザ上部に余白がとられているのでしょうか？ 基本はどのブラウザもhtml, body{margin:0; padding:0;}で余白は無くなるはずですが・・・ もうすこしソースの情報があったほうが良いかもしれません。
補足
ありがとうございます。 作りこんでしまっているので、必要かなと思われるところだけ抜いてみました。 よろしくお願いいたします。 リセットのCSS *{ margin:0; padding:0; font-style:normal; text-align:left; } body{ color:#333; margin:-1px 0 0 0; font-size:95%; line-height: 1.1; } 共通としてのCSS body{ text-align: center; background: url(../common_img/all_bg.gif) repeat-x #FFFFFF; } #wrap{ width: 820px; background-color:#FFFFFF; } div#subnav{ width:820px; background: url(../common_img/subnav_bg.gif) #fff; } #subnav ul { text-align: right; } #subnav li { display: inline; margin-right: 15px; padding-left: 13px; } <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="screen" /> </head> <body> <div id="wrap"> <div id="subnav"> <ul> <li><a href="sitemap.html"><img src="common_img/button/sitemap.gif" alt="あああ" width="77" height="12" /></a></li> <li><a href="contact/index.html"><img src="common_img/button/contact.gif" alt="いいい" width="121" height="12" /></a></li> </ul> </div> <div id="header"> <h1><a href="#"></a><img src="xxx.gif" width="316" height="42" /></h1> </div> <div id="servicenav"> <ul> <li><a href="#"><img src="xxx.gif" width="131" height="34" /></a></li> <li><a href="#"><img src="xxx.gif" width="131" height="34" /></a></li> <li><a href="#"><img src="xxx.gif" width="131" height="34" /></a></li> </ul> </div> </div> <!--end WRAP --> </body> </html>
IEってたしかhtmlかbodyのどちらかに1pxのボーダーが指定されていたはずです。もしかしたらそれのせいかもしれません。 html, body {border:0;} でどうでしょう？
補足
ご回答、ありがとうございます。 やってみたのですが・・・Firefoxの表示はかわりませんでした。 今、両方（IE6、FF2）のブラウザの表示をキャプチャして、見てみたのですが、bodyの背景画像で余白、というか「白」の部分（画像の最上部です）が67pxの画像なのに、Firefoxではその白部分が68pxとしてキャプチャされます。 IEは67pxでした。 FFはブラウザ上部に余白がとられているのでしょうか？
お礼
解決しました！！ ズレを色々修正している間に、おかしな指定をしていたようです。 何度もご回答いただいて本当にありがとうございました。