• ベストアンサー

Firefoxでページ位置が微妙にずれてしまいます

作ったホームページをプレビューで表示したときにページ全体が微妙に(見た目上では数ミリくらい?)で左右にずれるページがあります。 IEではずれないのに、Firefoxで確認するとページ全体が左右にずれて見えるページが出来てしまいます。(数ミリですが、左右に全体の位置がずれるとページ間ジャンプの際に結構気になってしまう) 基本的にテーブルで作っていますが、bodyの直下にページ全体を#wrapper(全体のレイアウト)で指定し、その中ヘッダー部分や本文の部分をテーブルで流し込んでいます。 初心者なので質問内容も何て書いたらよいのかわからないのですが、どうしても解決できなくて困っています。

  • HTML
  • 回答数4
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

あー。なんとなく分かった。 CSSのボックスにborderやpaddingを指定していませんか? 本来はborderやpaddingを含まないでボックスの大きさを計算するのが正しいのですが、 IEではborderやpaddingを含んだ値をボックスの大きさとして計算する場合があります。 対処法はIEとそれ以外でCSSを振り分けるとか…他にもあるかなぁ?

petapeta
質問者

お礼

ありがとうございます。 入れ子のテーブルには確かにCSSで幅やマージンを指定していますが、borderやpaddingは指定していません。 また、ページによって全体の枠が見た目で微妙に左右にずれるのがどうしてだろうって不思議なんです。しかもFirefoxで見た時にだけ。(多分MACも同じかな?IEでは全てのページにずれが見られないのに) ページによってボックスを使いまわしているので全てのページが同じように見えるはず?なのに・・・ボックスの中に写真を入れたり、またその入れ子のテーブルの高さが伸びてくると、そのページはFirefoxで見た時に左右に微妙にずれる現象が発生しているような気がします。

その他の回答 (3)

回答No.4

まさかとは思いますが… IEには縦スクロールバーが表示されていなくても、右端にスクロールバー分の空白ができるバグがあります。 Firefoxでは、必要なページにだけ縦スクロールバーが表示されます。 この違いにより、 縦方向に長い、一画面に収まりきらないページで、IEとFirefoxで左右の位置がずれて見えることがあります。(正確には、左へ数pxずれます。) これじゃないですよね?

petapeta
質問者

お礼

回答いただきありがとうございます。 ちょっと意味が違うような気がします。 すみません、質問の仕方が悪くて。 Firefoxでも同じつくりなのにページによって左右に位置がずれるのです。 CSSの作り方が根本的に間違っているんでしょうが。。。。 別の意味で参考になりました。ありがとうございました。

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

うーん、わからない^^; 推量ではどうしようもないみたいですね。ソースの提示をお願い致します。

petapeta
質問者

お礼

いろいろとありがとうございます。 おそらく(いや、絶対に)ソースがどこか違っているような気がします。 ソースの提示はどのソースを書けばよいのか、またCSSを書けばよいのか、それさえもわからず、頑張って修正もしてみたりしたのですが解決せずでした。 勉強してみます。 意味不明な質問に回答していただきありがとうございました。

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

Webブラウザのレンダリングエンジンが異なればページのレイアウトは若干ずれる場合があります。 px単位で完全に配置を同じにするには絶対値での配置となりますが、フォントサイズの関係で見づらくなることがありますのでお勧めできません。 誤差の範囲内であり、表示がおかしくならないのであれば正常ですので深く御気になさらずそのままにしておくのが宜しいのではないかと^^

petapeta
質問者

お礼

早速に回答いただきありがとうございます。 IEとFFで違うというよりも、Firefoxで確認してみるとページによって若干(5mmくらい?)の左右のずれが生じます。 IEではホームページ内のどのページを見ても全ページずれが生じないのに、FFで同じホームページ内を確認するとページによって左右に現象があります。(全てのページが同じレイアウト、同じテーブル構成で作っているのですが・・・) (ページによってbodyがずれるというか、#wrapperがずれるというか、とにかく一番外の枠がページによって左右に数ミリずれるんです)

関連するQ&A

  • Texのページ数の位置

    reportスタイルで、奇数ページのヘッダー右側に章番号、フッター左側にページ番号、偶数ページのヘッダー左側に章タイトル、フッター右側にページ番号をつけたいと思っています。fancyhdr.styを組み込み、 \documentclass[twoside]{report} \setlength{\oddsidemargin}{2cm} \setlength{\evensidemargin}{2cm} \usepackage{fancyhdr} \pagestyle{fancy} \fancyhead{} \fancyhead[RO]{Chapter \thechapter} \fancyhead[LE]{\leftmark} \fancyfoot{} \fancyfoot[LO]{\thepage} \fancyfoot[RE]{\thepage} \renewcommand{\headrulewidth}{0.4pt} \renewcommand{\chaptermark}[1]{\markboth{~#1}{}} とプリアンブルに書いたところ、それなりにうまくいったのですが、章ページのページ番号がどうしても中央になってしまいます。どのように改善したらよいでしょうか? また、偶数ページと奇数ページの基本的なレイアウト(本文の左右の余白の幅)が同じになるよう、目測でマージンをとったのですが、より正確に左右の余白を均等にするコマンドがありましたら、教えてください。

  • Win7と10でエクセルヘッダーの画像位置が変わる

    見積書でエクセルのヘッダーに印影画像を配置しています。Windows7の32bit、Office2013で作成したもので問題なく動いていますが、このファイルをWindows10で開くとヘッダーの画像の位置がページからはみ出てしまいます。 いろいろと確認していますが、ページレイアウトビューで確認したときの画像のずれと同じことが分かりました。Windows7でも、このページレイアウトビューの時は、ヘッダーの画像がはみ出てしまうのですが、印刷プレビューと印刷では元の位置に収まります。Windows10では、ページレイアウトビュー、印刷プレビュー、印刷の全てでヘッダーの画像が元の位置からずれてしまいます。 Windows10でこの現象を直す方法をご存知でしたら教えてください。 バージョンは、Windows10 Pro 64bit、Office2013 32bitです。 よろしくお願いします。

  • EXCELの改ページについて

    EXCELの改ページについて EXCEL2003で表を作成して印刷しようとしたのですが、改ページが上手くできず1ページ目がヘッダとフッタと本文22行が印刷されます。 2ページ目はヘッダとフッタと本文が37行印刷されます。 なぜか1ページ目には勝手に本文とヘッダとフッタの間に余白が設定されて印刷される行数が少なくなってしまいます。 これはなぜ起きるのでしょうか? 印刷範囲設定で印刷したい部分のみを設定しているはずなのですが。。。。。

  • 改ページプレビューについて

    エクセルで作成したA4の1枚の文書ですが、改ページのプレビューを見ると2枚目にもヘッダー(日付)が付いてしまってます。そのため、印刷すると不要な2枚目まで印刷されてしまいます。改ページプレビュー画面でその部分を削除を試みますが、削除されません。解決法を教えてください。

  • フッダーのページ印刷(ワード2000)

    フッダーにページ数を表示しているのに 印刷しても出てきません。 白黒のレーザープリンターではきちんと印刷されてくるのに、 EPSONのPM-3000Cで、インクジェットのカラーだと プレビューで表示されててもだめなのです。 ちなみにパソコンの機種はGateway GP7-500で OSはNTです。 余白のせいかと思いましたが、 文書の余白は 上下各15ミリ、左右各10ミリ、 用紙の端からの距離ヘッダー18ミリ、フッダー8ミリです。   カラーでなければ意味ないので、どなたか良策を教えてください。

  • FirefoxでのCSS

    Internet Explorerでは問題なく、文字の拡大表示の影響を受けないのですが、Firefoxだと、文字がでかくなったり、余白部分がずれたりします。 ヘッダーに以下を入れ、 <STYLE TYPE="text/css"> <!-- .12pt { font-size: 12px; font-weight: 200; line-height: 15px} --> </STYLE> テーブルやフォント等に <font color="#ff0000" class="12pt"> を入れています。 //////////////////////////////////////////////////////////// 問題のページは以下です。 (1)Firefoxでは文字が大きくなり、画像がずれ込む http://fuumiing.com/offer.html (2)Firefox文字自体が大きくなってしまうページ http://fuumiing.com/profile.html /////////////////////////////////////////////// 基本的に全てのFirefoxでは全てのページで 文字が大きくなります。 ・原因、もしくは ・良い解決法を ご教授下さい。

    • ベストアンサー
    • HTML
  • ホームページビルダーのページ編集の表示

    ホームページのテンプレートをホームページビルダー8で編集時 プレビューで正しく表示されますが、編集ページではヘッダーの画像などの位置が左右に大きくづれて表示されます。プレビューと同じように表示して編集したいのですがどうすればいいでしょうか教えてください

  • ieやfirefoxで。cssレイアウトが印刷時崩れる。

    cssでレイアウトしてます。 ieやfirefoxでの ブラウザ上(画面)表示ができるのですが、 いざ、印刷プレビューや印刷になると レイアウトが 崩れてしまいます...どのような 解決策。問題点があるのでしょうか? 印刷ページが中途半端にページをまたいでしまうから? marginとpaddingがゴチャついて ダメ。 いろいろ考えられますが。。。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • ページ全体をインラインフレームにしたい

    大きな1枚の画像の上にメニューと本文を同時に表示にするため、ページ全体を2つのインラインフレームにしたページを作ろうとしています。 スタイルシートで左右2カラムのレイアウトにして、左のインラインフレームはwidth:20%;height:100%;、右のインラインフレームはwidht:80%;height:100%;で指定したのですが、指定した覚えもないのに右側に余白ができてしまいます。 htmlやbodyのmarginとpaddingを0pxにしたりwidth:100%;とheight:100%;を入れてみたんですが、効果なしです。 基本的な作り方を習ったこともないので、途方にくれています。 端に余白が出来ないように、ページ全体をインラインフレームにする方法を教えてください!

    • ベストアンサー
    • HTML
  • ワードのページ設定についてです。。

    ワードのページ設定についてです。ヘッダー部分とフッター部分のページ番号の書式を別々に設定する方法を教えてください。10ページ程度のファイルをいくつかまとめた文書を作成しています。ヘッダー部分に各ファイルごとのページ番号を、フッターには文書全体通してのページ番号を入れたいと思っています。ヘッダーとフッターの書式を別々に設定する方法はあるのでしょうか?どうぞよろしくおねがいいたします。

専門家に質問してみよう