• ベストアンサー
  • すぐに回答を!

CSS)overflow,スクロールについて

独学でホームページをツクッテいる者です。 overflow:scroll;をするとIE以外でうまく表示できません。 Firefoxなどでは、BOXの中の文字がスクロールバーごとBOXの外(右側)に大きくずれてしまいます。 IEですと、きちんとBOXの中に文字も収まり、スクロールバーも表示されます。 ためしにoverflow:scroll;をCSSから消して更新すると、文字はBOXの中に収まります。 FirefoxでもBox内がずれずにスクロールされる方法はないでしょうか?

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数579
  • ありがとう数1

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

  • ベストアンサー
  • 回答No.2

この手の話の鉄則として、「IEなら思ったとおりになるのに」と感 じたら、規格の理解を間違っている証拠なんですよ。なにしろIEは 判りにくい勘違いしやすい部分をことごとく勘違いして作ってます からね。 スクロールバーは、パディングとボーダーの間に挿入されるべきも のです。#mainのwidthが410pxで#naiyouのwidthも410pxでは、スク ロールバーを挿入する余裕がないので、表示が崩れてあたりまえで す。IEはwidthの中にパディングやボーダーを取るという大きなバ グがあるので、スクロールバーの分の幅を取り忘れても平気だった んです。 スクロールバーを出す可能性があるボックスは、最初からその分の 余裕を見てサイズを決定して下さい。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

IEとFirefoxの違いを勉強しました。 原因は違う箇所にあったのですが、パディングのバグが原因でした。 今回は勉強になりました。

関連するQ&A

  • HTML超初心者です。CSSでOverflowをautoにして ifr

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

    • ベストアンサー
    • HTML
  • overflowのscrollを自動で移動

    CSSでoverflow:scrollと設定したときに表示されるフレームをボタンを作ってこのボタンを押したときに○○px横に自動的にスクロールさせるようなjavascriptはどのように書けばいいのでしょうか??対応ブラウザはIEのみで大丈夫です。

  • CSSで「overflow:scroll」をしてい

    CSSで「overflow:scroll」をしているボックス内で表示している 特定のボックスを最前面に表示させることは 可能なのでしょうか。 文字では説明しにくいので 例として ------------- <STYLE type="text/css"> .box1{ overflow: scroll; width: 200px; height: 100px; } .box2{ width: 200px; height: 40px; background-color: yellow; position: relative } .box3{ width: 200px; height: 40px; background-color: pink; position: relative; left: 100px; top: -10px } </STYLE> <div class="box1"> <div class="box2">Box No.2</div> <div class="box3">Box No.3</div> </div> ------------- だとして、 <div class="box3">Box No.3</div>を <div class="box1">よりも前面に表示させたいのですが スタイルシートで実現可能なのでしょうか。 いろいろ調べながらやってみましたが 解決できなかったので知恵をお貸し頂ければと思い 投稿させて頂きました。 よろしくお願い致します。

    • ベストアンサー
    • CSS

その他の回答 (2)

  • 回答No.3
noname#66720

ソースを見る限り問題はないようですが・・・ もしかしたら別の指定への影響が出てるのかもしれませんね。

共感・感謝の気持ちを伝えよう!

質問者からの補足

そうですか… 色々ありがとうございます。

  • 回答No.1
noname#66720

とりあえずソースを見せてください。 webページの作成はIEで作ってFirefox等にあわせるよりも、ただIEのバグを回避して作るほうが楽なので、なぜFirefoxでそのような表示になるのかを考えたほうが解決が早いですよ。

共感・感謝の気持ちを伝えよう!

質問者からの補足

なるほど、勉強になります。 --------------------------------------------------- CSS// #right{ background-image:url(images/waku.png); behavior:url(iepngfix/iepngfix.htc); width:450px; height:420px; float:left; } #main{ margin:20px; width:410px; height:380px; } #theme{ width:410px; height:80px; } #naiyou{ width:410px; height:299px; border-top:1px dotted #999999; overflow:scroll; background-image:url(iepngfix/blank.gif); behavior:url(iepngfix/iepngfix.htc); } --------------------------------------------------- HTML// <div id="right"> <div id="main"> <div id="theme"></div> <div id="naiyou">長文が入る</div> </div> </div> --------------------------------------------------- このような感じになっております。

関連するQ&A

  • overflow:scrollのスクロールバーのデザイン

    overflow:scrollのスクロールバーのデザイン 自分のHPで、あるリストを overflow:scroll にして、縦横指定して使っているんですが、その時のスクロールバーのデザインって変えられないのでしょうか。cssで、bodyに打ち込んでもダメ、そのリストのclassで指定してもダメでした。 どなたか分かる人があれば教えてください。

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • CSS スクロールバーのデフォルト スクロール位置について

     お世話になります。  CSSの x-scroll などで作成した左右にスクロールするスクロールバーがあります。  通常ですとページ読み込み時、スクロールエリアは左端にスクロールされた状態なのですが、右端にスクロールされた状態をデフォルトにする良い方法はないでしょうか?  javascriptで対応する方法も考えたのですが、一画面にスクロールするエリアが何箇所もある為、「一つ一つスクロールバーを移動」という処理よりも、最初から右側にスクロールされた状態で表示させる方法があるなら、そちらの方が良いような気がします。  同じようなことをされた方とか、ノウハウをお持ちの方、いらっしゃいませんでしょうか??

  • overflow: auto; 要素内をスムーススクロール

    はじめまして、よろしくお願い致します。 メニューとなるボタンをいくつか配置し、それぞれのボタン押下時に、 『overflow: auto;』の疑似フレームにて表示している要素内を スムースにスクロール移動させることは可能でしょうか。 (よくある「ページトップへ」で、ページ内リンクをスムースにスクロールさせる動きを、疑似フレームを対象に行いたいです。) 下記ページの「Section Scroller」のような方法も考えたのですが、 http://sandbox.leigeber.com/contentslider/slider.html スクロールバーが表示される仕様で実現できればと考えております。 分かりにくい説明で、サンプルコードも提示できない形での質問になりましたが、よろしくお願い致します。

  • CSSについて教えてください。

    携帯向けのサイトを作っています。 contentの文字列が画面からはみ出るので指でスワイプした分だけ スクロールしたいのですがCSSでできますでしょうか? スクロールバーは表示させたくないのでCSSで無効にしてあります。 どうかよろしくお願いいたします。 <div class="box"> <div class="content"> あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ </div> </div>

    • ベストアンサー
    • CSS
  • スクロール時に画面が波打つ

    firefoxが自動更新されたのち、 マウスでのスクロール時に画面の文字が波打つように見えにくくなりました。 スクロール時に文字が波打って目で追えないような感じです。 ためしにIEで同じように画面をスクロールしてみたのですが、こっちは波打つような感じではありません。ちゃんと以前のように目で文字を追えます。 対策として、インターネットオプションの項目、スムーズスクロール機能をオン・オフしてみましたが、どうも以前のスクロールとは見え方が違うように思えます。 波打たないように設定しなおす、やり方を教えていただけないでしょうか? OS;windows7 プラウザ:firefox13.0

  • divのoverflowのスクロールバーを自動スクロールしたい

    初めて質問します。 overflowのスタイル設定をしたdivに、innerHTMLで上から下にどんどん文字を 追加していくのですが、下にはスクロールされず、つまり自動スクロールされず わざわざ下にスクロール必要があります。 このdivのoverflowのスクロールバーを自動スクロールしたいのですが、 可能でしょうか?参考になる文献などがございましたら、教えてください。 msg.innerHTML=msg.innerHTML+"<font size=-1>テスト</font><br>"; これを入力するごとに繰り返しています。 divのoverflow以外にいい方法があれば、教えてください。 今はmsg.innerHTML="<font size=-1>テスト</font><br>"+msg.innerHTML; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。

  • Firefoxスクロールバーの有無でページがずれる

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

  • ▲▲HTML・CSS TABLEから文字がはみ出す場合スクロールバーをつける?またCSSのBOXについて▲▲

    例えば <table border="1" width="650" height="700"> <tr> <td></td> <tr> </table> 高さを700に設定しているので、中に文字を入力し700を超えるようであれば自動的に大きさが広がると思います。 その際TABLEの右側にスクロールをつけて、700をキープする事は可能でしょうか? またCSSでスクロールバーつきのBOXを作ったときに横のスクロールバーだけを表示するように設定は可能でしょうか??

    • ベストアンサー
    • HTML