- ベストアンサー
問題の解決方法
- HP制作中で、ページの最上部に高さ150pxの帯を作りたい。しかし、Firefoxでは内部セレクタの上に余白ができ、画像がずれる問題が発生している。
- IE7では問題ないが、Firefoxでは内部セレクタの上に余白ができてしまう。
- htmlのhead内に<style>を追加してみたが、問題は解決しなかった。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSの最初に html,body{margin:0px;padding:0px;}を入れたら解決するはず。
その他の回答 (1)
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
HTML のソースが提示されていない為よくわからないのですが、以下のようなソースで検証した場合、『内部セレクタの上の余白』とやらを確認する事ができなかったのですが…？（Firefox 3.6.2 を使用） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <style type="text/css"> <!-- body { color: #666666; font-size: 75%; background: url(image/head.png) repeat-x; margin-top: 0px; padding-top: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { height: auto; width: 800px; margin: 0 auto; } #header { height: 160px; margin: 0; padding: 0; background: url(image/head.png) repeat-x; } --> </style> </head> <body> <div id="header"> header </div> <div id="wrapper"> wrapper </div> </body> </html> そもそも『内部セレクタ』って何の事でしょうか？画像がずれるってことは #header の事なのかなぁ？とにかく HTML の構造がわからない事には確かなことは言えません。
お礼
すみません。 今、色々試してみたら、原因がわかりました。 h1 id=logoにmargin: 0pxを入れたら解決しました。 お騒がせしました。ありがとうございました。
補足
すみません。解りにくくって。 ＨＴＭＬはこんな感じです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>○○○</title> <link href="xxx.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- body {margin-top: 0px;} --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="logo" alt="○○○"><img src="image/logo.gif"> </h1> </div><!--header--> <div id="content"> <p>○○○○○○○○○</p> </div><!--content--> </div><!--wrapper--> </body> </html> #wrapperのtopのマージンを０にしても余白ができてしまいます。
お礼
ありがとうございます。やってみます。