• 締切済み

枠がスクロールさせると消える

ブログのような日記調記事をいくつも縦に並べて表示したいと思っています。 例)  <div 大枠>    <div 記事(float: leftにしている)></div>    <div 写真></div>  </div>  上記<div 大枠>から繰り返し・・・ 最初ぱっと見はそれらしい形になるのですが、IEの場合のみ下の記事を見ようとスクロールさせると、大枠の左右の枠線が一部消えます。 (上下は問題なく、角部分も表示される) 上の記事に戻ると、最初見えていた上部記事の枠も左右とも消えてしまいます。 画面から見えない位置にある記事の枠を表示させる時に異常が生じるようです。 IE以外では問題なく、どうしても直すことができません。 枠を常時表示させるにはどうしたらよいでしょうか。 枠の設定 <div class="waku"    style="border-style:solid;       border-width:thin;       border-color:#CCCCCC;       padding:10px 20px 0px 0px;">

みんなの回答

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

枠線を細くしたときスクロールなどで消えてしまうのは多分IEのバグでしょう。 枠線を太くする以外どうしようもないのではないかと思います。

mutu560
質問者

お礼

ありがとうございます。 別途書いてみたものを、入れ込んだらなぜか大丈夫になりました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • floatについて

    ■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか? 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか? <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>

    • ベストアンサー
    • HTML
  • cssを使った枠線の表示について

    css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか? (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか? (3)文字列と枠線との間隔を調整することは可能でしょうか? 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。

  • 枠の固定

    左右に分割したフレームの右側に <center> <div style="border-style:ridge; border-width:10px; width:400; height:120;"> </center> というタグで枠を作成しました。(枠の中に文字が入っています) 私のPCの画面からであると、真ん中に表示されるのですが、 画面サイズやアスペクト比が異なると、 ずれが生じてしまうようなのです。 これを常に真ん中に表示させるようなタグがあれば 教えて下さい。

    • ベストアンサー
    • HTML
  • divで作った枠が本文の入力で形が崩れてしまう。

     HTML側         <div id="waku">     <p>本文</p></div>  stylesheet側     #waku { border : 1px solid #FF9900 ; float : left ; width : 750px ; height : 500 ;}  このように入力し、画面左側に本文を収めるための枠を用意しました。そしていざ本文を入力すると、本文が画面右いっぱいにまで入力され、さらに、それにより枠も指定したpx通りではなく文字が表示される箇所に合わせて形を変えてしまいます。  解決方法をご教授下さい。

  • div要素をセンタリング

    <div style="width:300px; text-align:center; border:1px dashed red;"> この文字は中寄せ <div style="width:200px; border:1px dashed green;"> このボックスも中寄せ </div> </div> このようなHTMLを表示すると、 IEでは、赤い枠の左右中央に緑の枠が入り、「この文字は中寄せ」という文字と、緑の枠が縦にきれいに並ぶのですが・・ネスケやOperaでは、緑の枠が左に寄ってしまいます。 これを、中央に寄せる方法はないでしょうか? (表示が遅くなるのを防ぐために、テーブルは使いたくありません)

    • ベストアンサー
    • HTML
  • divの入れ子枠の中に収めたい

    左側に記事 右側に写真 それらを大枠で囲った日記風のものをdivの入れ子構造で作成しています。 <div 大枠>  <div 記事(float: leftにしている)></div>  <div 写真></div> </div>       のような感じです。 概ねそれらしく出来たのですが、記事を長く書き込んでいくと文章下部が大枠からはみ出してしまいます。 大枠の高さは写真高さに従っているようです。 記事のほうの高さに従わせるにはどうしたらよいでしょうか。 それと、左に記事 右に写真を並べて表示が、IEのみうまく表示されません。 記事の文末の高さに写真の上端がそろうような感じです。 IEでうまく表示できないのは、何が問題なのでしょうか。 どうしても分りません。教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSS 左右違う大きさのボックスでheightを合わせたい

    外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス(で良いのでしょうか?)を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか? また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか? どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>

    • ベストアンサー
    • HTML
  • cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかな

    cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku3"> width:200px; border: solid 3px #d3d3d3; background-color:red; <div id="waku7"> width:570px; border: solid 3px #d3d3d3; float:left; } 私としては780pxで作成した枠の中に、左側に200pxの枠を作成して、その右側に、570pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします 感じとしては以下のような感じで御座います。 http://desktop10.web.fc2.com/ どなた様か、ご教示のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい

    cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします

    • ベストアンサー
    • HTML
  • CSSを用いた角丸の枠(フタ-中身-底)の作り方を教えてください。

    こんにちは。 こんな角丸の作り方が知りたいです。 フタ(画像)   ┌─────┐(実際は角丸の画像) 中身(左右の罫線)│     │ 底(画像)    └─────┘(実際は角丸の画像) 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部(底部)と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。

このQ&Aのポイント
  • 高校時代の同級生と卒業してから完全に疎遠になってしまった33歳独身女性の悩みについて
  • 高校時代に親しい友達ができなかったため、卒業後も同級生とのつながりがない状態が続いています
  • SNSやクラス会などでも同級生との交流がないため、職場で高校の友達と会っている人との違いに悩んでいます
回答を見る