• 締切済み

IE7の<div>のバグ

IE7でgooglemapの表示がおかしくなります。 <div id=～>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id～>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。

  • HTML
  • 回答数1
  • ありがとう数0

みんなの回答

回答No.1

IEはヴァージョンによらず、CSSにおけるバグの報告があるようです。 バグであれば対応が困難であり、ここで悩むのは時間の無駄です。 私も複数のGooglemapを<div id=～>で並べようとして、IE9の表示が 思い通りにならなくて苦労しました。 その時取った対応は、tableで幅と高さを決め打ちしておき、そこに <div id="マップid" style="width: 幅px; height: 高さpx">で 入れ込むというものです。 この方法だと、マップ表示の位置を決めるのは簡単で、ブラウザの 種類によって見た目が異なる問題も発生しません。

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

関連するQ&A

  • 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; で、つまり下から上に表示して無理矢理、表示させています。 どうぞ宜しくお願い致します。

  • divのheight指定で画面一杯に表示したい

    よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 　html, body { 　　height: 100%; 　　margin: 0px; 　　padding: 0px; 　} 親子構造としては以下を想定しています(いくらか簡略化しています) <html> 　<body> 　　<div id="H" style="height:60px;"> 　　　(1)ここにヘッダー的なもの 　　</div> 　　<div id="B" style="height:100%; overflow: auto;"> 　　　(2)この部分を縦一杯にしたい 　　</div> 　</body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 　<div id="B" style="height:100%; overflow: auto;"> 　　<div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> 　　<div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> 　　<div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> 　　・・・ 　</div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？

    • ベストアンサー
    • CSS
  • firefoxで見るとdiv背景画像がスクロールで消えてしまいます

    http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。 何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }

    • ベストアンサー
    • CSS
  • <div style="overflow">でこんなことは出来ませんか？

    <div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEだとdivが横に並びません

    CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }

    • 締切済み
    • CSS
  • DIVの幅を常に100％にしたい

    以下の構成でページを作っています。 <body> <div id="div1"> </div> <div id="div2"> <table id="table1">...</table> </div> </body> 「div1」には背景色を設定し、横幅100％で表示しています。 「div2」内のテーブル「table1」の内容はPHPで出力しているのですが、 iPhoneで表示したときに、テーブルの幅が大きくなる(画面の幅を超える)と、 「div1」の幅が元々の画面サイズまでしか描画されません。 テーブルの幅が大きくなった時に、「div1」も一緒に大きくなるようにするにはどうすればいいでしょうか。 外枠用のテーブルを使えばできるのでしょうが、できれば構成を変えずにやりたいです。

    • ベストアンサー
    • HTML
  • DIV の中にTableを配置すると、下の表示されてしまいます

    どなたか教えてください！ <tr> <td> <div style="height:400px; width:470px; overflow-y:scroll;" align="left" valign="top"> <table>・・・ スクロールバーの中にテーブルで写真を並べて作成しています。 私のブラウザの環境ですと、うまく表示されますが、 友人のパソコンで見ると、Ｄｉｖの部分から下が、画面の下のほうへずれて表示されてしまいます。 そもそもＤＩＶの中にＴＡＢＬＥは配置してはいけないのですか？ 環境によって・・・何か原因があるのですか？（ＩＥのバージョンは一緒でした。） 宜しくお願いいたします。

  • IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩ん

    IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩んでいます。 <body>と<div>にそれぞれ背景を設定しているのですが、<div>に設定した背景だけが、 縦のスクロールバーと一緒にスクロールしてしまいます。 背景自体はCSSで下記のように設定しています。 background:url("./hoge.gif") no-repeat fixed center top; <body>も同じ設定で背景を表示させているのですが、こちらは問題なく固定表示になっています。 <div>などのボックス要素では固定表示させることは無理なのでしょうか？ どうぞ知恵をお貸しください。

  • 表示時にdiv要素のスクロール位置を指定したい

    上部にヘッダー、左にメニュー、右にコンテンツ、下部にフッターという、２カラムのHTMLなのですが、左右のdiv要素にoverflowでスクロールをそれぞれ付けています。 問題なのは、この左側のメニューで、サイト内リンクをクリックすると新しくリンク先ページが開くので、当然スクロール値は０になります。 後方のボタンの場合、どのボタンを押したのかわからなくなってしまいます。 ということで、javascriptでスクロールの位置を調整したいのです。 私は初心者でして、見よう見まねで下記のように書いてみたのですが、スクロール値は０のままです。 根本的に間違っているのかすら解らずで、ご教授願いたいと思い投稿させて頂きました。 宜しくお願いいたします。 window.onload = function(){ sub_scroll.scrollTo('se'); } ※sub_scrollは左のdiv要素のidです。 seは先頭にしたい箇所のidです。

  • 【CSS】IEでのoverflow使用時のスクロールバー

    overflow:auto;で疑似フレームを使用しています。 IEのみでスクロールバーが表示はされるのですが、 固定されてしまっていてスクロールが出来ません。 ここ数時間webで調べていたのですが、解決方法が分かりません。 解決方法はあるのでしょうか。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する