iframeが正しく表示されない場合の解決方法
- ウェブページ上でiframeが正しく表示されない現象には、特にInternet Explorer以外のブラウザで発生する場合があります。
- この問題を解決するためには、以下の対策方法があります。
- まず、iframe内のコンテンツのサイズを固定することで、表示のずれやスクロールバーの表示の問題を解消できる場合があります。また、CSSを使用して、box1のサイズや位置を調整することも効果的です。
- ベストアンサー
iframeが正しく表示されません
#box1{ width: 595px; float: left; height: 570px; margin-top: 70px; margin-left: 10px; border: 1px solid #000000; } <div id="box1"> <iframe src="http://astore.amazon.co.jp/uraren-22" width="100%" height="100%" frameborder="0"></iframe> </div> とゆう表記でHPを作成したのですが、IEではちゃんと表示されるのですがfirefoxやsafariですと、box1の中に表示されず下にずれ、スクロールバーが表示されなかったりもします。 解決方法をお願いします。
- hiroto0526
- お礼率42% (3/7)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
↓こういうことでは？ http://blog.d-spica.com/entry/070307clearfix.html IEで表示されるのがバグらしいです。
関連するQ&A
- 指定したborderの一部が表示されない
以下のようにboxを作りその中にフロートさせた2つ(div class="b"とdiv id="c"を作り、 div class="b"の方にdiv class="nwesbox"を作り、その中にiframeを入れました。 問題はdiv class="nwesbox"に上下左右に表示指定したborderの線の右側のみブラウザ（ie7)で表示されません？ div id="c"を取り除くと表示されます、nwesboxやiframeの幅を変更したりしてみましたが 解決できなく困っています、どなたか教えていただけますでしょうか？ 宜しくお願いします。 以下html記述-----↓ <div class="box"> <div class="b"> <div class="nwesbox"><iframe id="iframe" frameborder="0" scrolling="yes" src="whats.html" title="お知らせ">お知らせ</iframe></div> </div> <div id="c"> <p>*****</p> </div> 以下CSS記述------↓ .box{ width : 898px; margin-left : 0px; margin-top : 0px; padding-left : 0px; margin-bottom : 0px; } .b{ width : 575px; margin-left : 0px; margin-top : 10px; background-color : #ffffff; padding-left : 10px; float : left; margin-right : 0px; } .nwesbox{ width : 575px; height : 233px; background-color : #ffffff; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #0080ff #0080ff #0080ff #0080ff; } #iframe{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 573px; height : 228px; padding-top : 0px; overflow : auto; margin-top : 0px; } ↓---iframe内に読み出してる先のテーブルに指定した内容（テーブル幅）--- #what{ width : 545px; background-color : #ffffff; margin-top : 0px; }
- 締切済み
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- インラインフレームを使用するとIE6でレイアウトが崩れます。
インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、 インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> <!-- #boxここまで --></div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ boxのなかにmain（右回り込み）とmenu（左回り込み）で２カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが 上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv（下記#contents）を切り テキストのページをつくった場合はきれいに回り込みます。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> ・ ・ ・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキスト テキスト </div> <div id="menu"> メニュー </div> ・ ・ ・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしても カラム落ち？は直らないという謎の状況です・・・ 他のサイトを同じようなCSSで作ったときには、 インラインフレームを使用してもIE6で問題なく表示されたので 今回のエラー？ バグ？ がなぜおこっているのか見当もつきません。 状況を上手く説明出来てないかもしれませんが、 アドバイス等ありましたらお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #b{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 144px; height : 240px; float : left; display : inline; } #c{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- 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でみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
- 締切済み
- HTML
- ホームページを作っています、ページ内に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
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- div枠のレイアウトが崩れてしまいます
２×２段の枠を作るために、下のような段組にしました。 100％表示ではうまく表示するのですが、ウィンドウを縮小すると、 div要素が勝手に改行してしまい、レイアウトが崩れてしまいます。 同じような質問を参考にして、"wrap"の幅設定をしてみたり、 div要素に｛position:relative;}を追加してみたりしましたが、 どれもうまくいかず、縮小でレイアウトが崩れます。 ウィンドウを縮小してもレイアウトが崩れないようにする方法はあるでしょうか？ それと、もう１つ質問があります。 右上の枠内の画像を「枠内の右下」に表示したいのですが、よい方法はありますか？ {text-align:right;}で横位置は移動できたのですが、縦位置がうまく設定できません。 画像自体に｛potision:absolute;}{top:**}{left:**｝で指定すると、 またウィンドウの倍率変更でとんでもないところに表示されてしまいます。 【html】 <body> <div id="wrap"> <img src="image/title.gif"> <div id="left-up">あああ</div> <div id="right-up"><img src="logo.jpg"></div> <br class="clear"> <div id="left-down">いいい</div> <div id="right-down">ううう</div> </div> <!-- /wrap--> </body> 【css】 #wrap{ width: 945px; height: 700px; padding: 0px; border: 1px #202020 solid; margin: 0 auto; text-align: left; } #left-up{ width: 160px; height: 80px; border-top: 1px solid #606060; border-right: 1px solid #606060; float: left; } #right-up{ width: 780px; height: 80px; border-top: 1px solid #606060; float: left; } .clear{ clear: left; } #left-down{ width: 160px; height: 500px; border-top: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } #right-down{ width: 780px; height: 500px; border-top: 1px solid #606060; border-bottom: 1px solid #606060; float: left; } よろしくお願いいたします。 そもそも、この枠組みの仕方が無謀であれば、何かよい方法を教えていただけないでしょうか。 重ね重ね申し訳ありません。
- ベストアンサー
- HTML
お礼
ありがとうございます。 参考にさせてもらいます。