- ベストアンサー
Ｉｎｔｅｒｎｅｔ Ｅｘｐｌｏｒｅｒ と Ｍｏｚｉｌｌａ Ｆｉｒｅｆｏｘ の表示の違い
初心者です。 うまく質問できないかもしれませんが、よろしくお願いします。 ページのソースを見たとき、双方とも下記の様になっています。 BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } しかし実際の画面では、Ｆｉｒｅｆｏｘの方で、 margin-top : 0px; が効いていません。したがって、ページの最上部にブランク行が入ったように表示されます。 原因は何でしょうか。 よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- doubleman
- ベストアンサー率33% (1/3)
横から失礼します。 >早速試してみますが、Ｅｘｐｌｏｒｅｒでの閲覧は正常に表示されています。Ｆｉｒｅｆｏｘの時のみ正常に表示されません。この場合でも、ご指摘の方法でよろしいのでしょうか。 とのことですが、問題ありません。 今回の場合は、IEでは指定する必要のないものがFirefoxでは指定する必要があったというだけだと思います。 他の方の仰った方法でやって、例えばIEの表示がおかしくなってしまうなどということは起こりませんので大丈夫です。 （絶対とは言い切れませんが…） IEとFirefoxなど異なるブラウザ間でWebページを同じように表示させるのって大変ですよね。 状況に応じて両方をカバーしていかなければなりません。頑張ってください。
お礼
ありがとうございます。
- RH01
- ベストアンサー率45% (37/82)
こんにちは。 bodyの設定は、それで問題ないはずです。 必要なものがあるとすればパディングの設定なので body{ margin:0px; padding:0px; } としてみてください。 ちなみに、上下左右の設定が全部同じ場合 margin-topなどを使わずに、marginのみでも設定できます。 そして、問題があるとすれば、HTMLでbodyの直後に 何を書いてあるかだと思います。 例えば <body> <p>文章とか画像</p> </body> のように、PタグやDivがある場合 そのタグ自体が余白を持っているので bodyの余白が0でも、上に余白が出てしまうのです。 直後にあるタグ（上の例の場合は p ）の余白を0に設定すれば、ぴったり上につくと思います。 p{ margin:0px; } No1の方が書かれている通りかと思いますが 初心者の方と言うことで補足として書きました。
お礼
ありがとうございました。
補足
ありがとうございます。 早速試してみますが、Ｅｘｐｌｏｒｅｒでの閲覧は正常に表示されています。Ｆｉｒｅｆｏｘの時のみ正常に表示されません。この場合でも、ご指摘の方法でよろしいのでしょうか。
関連するQ&A
- FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？ 直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。
- ベストアンサー
- CSS
- スクロールバーによって表示がズレます。
下記のようにCSSを書きました。 topとしてテーブルクラス指定した中に、areaの領域をとって内容を流し込んでいるのですが、ブラウザにスクロールバーがつく場合とつかない場合とで表示が中央からスクルーロバー分、広くなったり狭くなったりします。（IEはOKなのですが・・・） どうすれば表示がずれないようにできるでしょうか。 --------------------------------- body { margin-top: 0; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; color: #333333; text-align: center; background-color: #FFFFFF; } #area { padding-top: 2px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px; } table { margin: 0; padding: 0; } table.top { margin-top: 5px; margin-right: auto; margin-left: auto; margin-bottom: 0; width: 780px; text-align:center; background-color: #FFFFFF; } table.top td { text-align:left; vertical-align: top; }
- ベストアンサー
- HTML
- ＦｉｒｅＦｏｘで見ると表示がおかしくなってしまいます
困っています。質問させてください。 このカテゴリでいいのか分からないのですが・・・。 ＨＰを運用しているのですが、聞きかじりのcssを利用しています。 ＩＥだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはＦＣ２を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。 ちなみに使っているcssは * { margin:0; padding:0; } html { text-align:center; height:100%; } body { width:600px; height:100%; text-align:left; } #HEADER img { display:block; } #NAV { float:left; width:200px; height:100%; margin-top:-100px; padding-top:100px; } #CONTENT { width:650px; height:100%; margin-top:-100px; padding-top:100px; margin-left:200px; } です。index.htmlのbody部分にはfontの大きさは全く指定していません。 よろしければFireFoxでご覧になってみてください。 http://clovermiwa.web.fc2.com/ 私はＨＴＭＬをかじったくらいで、cssについては全く分かりません。 ＨＴＭＬが間違っているのかもしれません。 色々いじってみましたが、問題が解決されず、困っています。 よろしければご教授、お願い致します。
- ベストアンサー
- HTML
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- marginの値が0と値、未指定との違い
例えば、次の二つはどう違うのでしょうか？ ※abcというボックスがあったとします。 (1)#abc{margin:0 20px 0 0;} (2)#abc{margin-right:20px;} 色々なレイアウトで上の(1)と(2)との違いを確かめたのですが、その違いが分かりませんでした。上記ではmargin-rightですが、もちろんleft,top,bottomでもそうです。具体的なサンプルソースがなくてすいません。
- ベストアンサー
- CSS
- ホームページの背景画像が途切れてしまう。
こんにちは。 現在、ホームページを作っているのですが、背景画像で困ってしまって質問しました。 ホームページはhtmlとCSSを使って、ホームページビルダーで作っています。 bodyに背景画像１を設定しています。 ホームページの内容は <div></div>の中にinnerというclassを作って スタイルシートで40ｐｘ×40ｐｘの背景画像２を「repeat」指定しています。 この背景画像２が、IEでは表示されているのですが、firefoxやchromeだと下のほうで 途切れてしまいます。 それも、ちゃんと表示できてるページと、途切れてしまうページの２種類があります。 原因を自分でも探してみたのですが、見つかりませんでした。 もし、知っている、気付いた方がいらっしゃったら教えていただけませんか？？ よろしくお願いします。 ちなみに、下記はスタイルシートに記載しているものです。 --------------------------------------------------------------------- body{ text-align:center; margin-right : auto;margin-left : auto; background-image : url(mokuteki/taiiku/bg_brown.png); background-repeat: repeat; font-size : 90%; padding-top : 0px; padding-bottom : 0px; margin-top : 0px; margin-bottom : 0px; } #wrap{ text-align : center; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : auto; width : 100%; padding-top : 0px; } .inner{ text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; width : 900px; background-image : url(images/bg_white.png); background-repeat : repeat; } -----------------------------------------------------------------
- ベストアンサー
- デザイナー・クリエイティブ職
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
- firefoxにおいてページ全体の配置
Firefoxでページ全体の表示を中央に配置するにはcssでどうすればいいんでしょうか？ もちろん、ＩＥでは中央なのに・・・。 body { text-align: center; margin-right: 0px; margin-left: 0px; } では間違いでしょうか？？
- ベストアンサー
- HTML
- Firefoxで文字がimgの裏側に入ってしまう
CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側（裏側）になっているのか？ 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>：：：：：：：：：：：：：<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; }
- 締切済み
- HTML
- ポリプロピレンと天然ゴムシートを効果的に接着する方法についてご紹介します。
- エポキシはポリプロピレンとの接着には向いていないため、他の接着剤の使用を考えてみましょう。
- バケツ使用時に水に浸かる状態で使われるゴムシートには、適切な接着剤の選定が重要です。
お礼
ありがとうございました。 Firefoxの場合、 body{ margin-top: 0px; margin-left: 0px; ： ： だけではなく、 div { margin-top: 0px; margin-left: 0px; ： ： も必要だった要です。
補足
ありがとうございます。 早速試してみますが、Ｅｘｐｌｏｒｅｒでの閲覧は正常に表示されています。Ｆｉｒｅｆｏｘの時のみ正常に表示されません。この場合でも、ご指摘の方法でよろしいのでしょうか。