• ベストアンサー

右端に1ｐｘの余白ができてしまう

Firefox3.6・IE8では正常に表示できるのですが、Google chrome・IE6で右に1pxの余白ができてしまいます。（Operaは未確認） スクロールバーが出ると発生してしまうのですが、CSSとHTMLを見直してもどこが問題なのか判らず、行き詰まっています。 初歩的だと思いますが、よろしくお願いします。 ファイル：http://kissho.xii.jp/1/src/1jyou105039.zip.html

画像を拡大する
  • CSS
  • 回答数1
  • ありがとう数4

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

  • ベストアンサー
  • LOHA
  • ベストアンサー率52% (203/388)
回答No.1

＞右に1pxの余白ができてしまいます。 特に右に余白はないのですが…ちょっと意図がわかりかねます。 それよりむしろ、左右スクロールバーがでると、色々大変な事になってるような気がしますよ（幅指定に問題があります、mainなどにもwidthを920pxにするなり、marginを0 10pxとするなりして幅が920pxになるようにしないといけないかと）。 ＃私ならheader, manubar, main, footerを同階層にしてこれら全部をwrapperで囲みますね。

hyoka_yy
質問者

お礼

headerからfooterまでwrapperで囲み、marginで左右に10px指定することで直りました。 左右スクロールバーの問題も解決しました。 説明が下手で申し訳ありません…どうもありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • blogのwrapperの上下に余白が10pxほど空いていますが、つめるにはどうしたらいいでしょうか？

    wordpressを使用してブログを作成していますが、wrapperの上下の部分に、10pxほど余白ができてしまっています。 IE5 IE6 FireFoxのいずれでも、余白があるのですが、この余白をつめるには、どうしたらいいのでしょうか？ cssの定義は以下の通りなのですが、これは、cssでは、余白を埋めることはできないのでしょうか？ .wrapper { background: url(images/wrapper.png) repeat-y; position:relative; width:1000px; margin:0px auto 0px auto;

    • ベストアンサー
    • HTML
  • Firefoxスクロールバーの有無でページがずれる

    Firefoxスクロールバーの有無でページがずれる 縦の長さが長いページから短いページに切り替えるとき、スクロールバーの関係で左右にガタガタずれて見えるためcssで html{ height:100%; margin-bottom:1px;} と入れてみました。（ネットで探したものです） そうするとOperaとgoogleとSafariではずれなくなったのですが、Firefoxだけ相変わらずずれます。 overflow-y:scrollにするとずれませんでしたが、IEで見たときスクロールバーが二重に見えたので、この方法は避けたいです。 Firefoxでもガタガタずれずに切り替えられる方法はありませんでしょうか？ よろしくお願いします。

  • CSSで画像の横に余計な余白が・・・

    質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。

  • windows meの画面の異常について（画像付）

    セカンドマシンとして、windows meを使っていますが、今日いつも通りに起動させたところ、http://kissho.xii.jp/1/src/1jyou25870.jpgのようなデスクトップになってしまいました。（まるでセーフモードのようです。http://kissho.xii.jp/1/src/1jyou25871.jpgのように余白が黒くなっています。） また、解像度がhttp://kissho.xii.jp/1/src/1jyou25873.jpgのように低くなっています。モノクロチックとでも言いましょうか。 おそらく、画面の設定が変更されたことが原因だと思います。設定の方法を教えて下さい。因みに、マウスを使う事が出来ませんでした。

  • ブラウザによって、画面表示の色が変わる理由。

    　こんばんは。趣味のブログをやりながら、HTML や CSS を勉強しています。 　さっそくですが、同じ背景色や画像を HTML や CSS で指定しても、ブラウザによって色味が異なるように思います。Firefox で見ると Opera よりも黄色っぽく見えるのですが、これはどうしてでしょうか？ 　なお、 　　・Windows XP + Opera 　　・Firefox 　　・Google Chrome 　　・IE8 で動作確認しています。

    • ベストアンサー
    • CSS
  • IEだけ外部CSSを読み込まない

    こんばんは。 レスポンシブサイトを製作中なのですがIEだけが外部CSSを読み込みません。 Chrome、Firefox、Opera、Safariなどのモダンブラウザは異常なく読み込みます。 IEに限ってどのバージョン（少なくとも８～11）もCSSを読み込まずHTMLだけのレイアウトです。 考えられる原因は何だと思われますでしょうか？ モノをあげられないので推測での話になると思うのですが、よろしくお願い致します。

    • 締切済み
    • CSS
  • ホームページを作っています、ページ内にiframeで他のページを表示さ

    ホームページを作っています、ページ内にiframeで他のページを表示させています。 IEではこのiframeにスクロールバーが出て、縦に長いデータをスクロールして閲覧あせる事が できるのですが、Firefoxだとスクロールバーが出ません・・・ どなたか表示させる方法をご存知でしたら教えてください。 以下HTML記述 <iframe name="iframe4" id="iframe4" frameborder="0" scrolling="yes" src="topix.html" title="※※">※※</iframe> CSS記述 #iframe4{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 420px; height : 490px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; }

    • ベストアンサー
    • HTML
  • IEの場合に、リストに余白ができてしまう

    以下のようなコードを書いています。 HTMLのコード：：：：：：：：：：：：：： <ul id="side_menu"> <li><a href="#">メニューA</a></li> <li><a href="#">メニューB</a></li> <li><a href="#">メニューC</a></li> </ul> ：：：：：：：：：：：：：：：：：：：： CSSのコード：：：：：：：：：：：：：： #side_menu { list-style:none; padding:0; margin:0; } #side_menu li { padding:0 0 0 25px; margin:0; background: #F6F8E7 url(icon.gif) no-repeat 7px 5px; border-left:1px solid #DDE6A5; border-right:1px solid #DDE6A5; border-bottom:1px solid #DDE6A5; } ：：：：：：：：：：：：：：：：：：：：： という感じで、サイドメニューにリスト要素を使い、リストの丸を消したあと、背景に矢印のようなアイコンを入れ、メニューAなどはpaddingでずらして表示しています。 FireFoxやOperaなどでは、paddingが意図したように表示されるのですが、どうやらIEはpaddingを一旦0pxで指定しても、余白ができてしまうみたいで、他のブラウザより右に寄ってしまいます。 IEでも、FireFoxなどと一緒の余白にしたいのですが、どうすればいいのでしょうか？アンダースコアハックみたいな形で、IEのみpaddingにマイナスの値を入れるしかないのでしょうか？ 教えてください。

  • なぜか余白が…

    スタイルシートでmarginを0pxに設定し、テーブルを幅100％、縦100％に設定したあとでjavascriptを設定すると、どうしても上部に余白が出来てしまいます。 javascriptを設定しないときは <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR><TD></TD></TR></TBODY></TABLE> </BODY> </HTML> と正常なんですが、javascriptを設定すると、 <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } --> </STYLE> <SCRIPT Language="JavaScript"> <!-- document.write("<img src=cgi-bin/sasuke.cgi?sasuke="); document.write(document.referrer+"' width=1 height=1>");// --> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="1" width="100%" height="100%" bgcolor="#000000"> <TBODY><TR> <TD></TD> </TR> </TBODY></TABLE> </BODY> </HTML> のようにどうしても上部に余白が出来てしまいます。 このスクリプトを設定したときのみ、こうなるので非常に困っています。（ＨＰのデザイン上…） どなたか、よい方法がありましたら教えてください。m(__)m なお、スクリプトはアクセス解析です。 当方はwindows98 ie5.5の環境で作成しています。 javascriptはこの場合はhtml内に組み込んでいますが、××.jsで呼び出しをかけています。 よろしくお願いします！

    • ベストアンサー
    • HTML
  • ＨＴＭＬ超初心者です。ＣＳＳでOverflowをautoにして ifr

    ＨＴＭＬ超初心者です。ＣＳＳでOverflowをautoにして iframeのようにスクロール出来るようにしているのですが、スクロールバーのある右端ギリギリまで文字がいってるので、スクロールバーの左に文字との余白を作りたいです。出来なくて困っています。 余白をつくることは可能でしょうか、アドバイスをお願い致します。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する