DIVタグでの擬似インラインフレーム

このQ&Aのポイント
  • DIVタグで擬似インラインフレームを実現させる方法について
  • テキストリンクのプロパティ表示時に発生する<DIV>タグの位置のずれについて
  • <DIV>タグ内に<table>タグと<A>タグテキストリンクがある場合に問題が発生する
回答を見る
  • ベストアンサー

DIVタグでの擬似インラインフレーム

<DIV>タグで擬似インラインフレームを実現させようと思っています。 <DIV>タグ内に<table>タグがあって、<td>タグ内に<A>タグテキストリンクがある場合に、そのリンクを右クリックしてプロパティを表示させると、 <DIV>タグの位置がずれてしまいます。 ・動作テスト OS:WindowsXP SP1 ブラウザ:IE6 ・テキストリンク<a>タグを右クリックしてプロパティを表示させたときのみ発生する。 ・NN7.1では発生しません。 原因がまったくわかりません。 簡単な例↓ <DIV style="width:640px;height:350px;overflow:scroll;"> <table width=620px><tr><td><A href=http://www.yahoo.co.jp>YAHOO</A></td></tr></table> </DIV> 以上のような感じです。 しかし、実際に操作していただくと、何が問題なのかがわかると思いますので、以下のページを参照してください。 http://members3.jcom.home.ne.jp/takokko/divframetest.html 大変困っております。なにとぞ、宜しくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • msi21st
  • ベストアンサー率66% (2/3)
回答No.2

お役に立てて何よりです。 「とほほのWWW入門」と言うサイトで、 WEBに関するさまざまな技術が記載されていますので、大変役立つと思います。 参考URLに記載させて頂きましたので、 参考にされて見ては如何でしょうか。 overflowの各パラメータの解説も掲載されています。 >overflow:scrollにバグがあるということなのでしょうか? Netscape等ではレイアウトの崩れは起こらなかったので、 Internet Explorerのレンダリングエンジンのバグの可能性があると思います。

参考URL:
http://www.tohoho-web.com/www.htm
takokko
質問者

お礼

ほんとうにありがとうございました。 ずっと、困っていたので、助かりました。

その他の回答 (1)

  • msi21st
  • ベストアンサー率66% (2/3)
回答No.1

DIVタグのスタイルで overflow:scroll を overflow:auto にして見て下さい。 上記の修正でレイアウトの崩れはなくなると思います。

takokko
質問者

お礼

msi21st 様 ありがとうございます!!! おっしゃったとおりにしましたら、フレームの位置がずれると言うことが起きなくなりました。 本当にありがとうございます。。 overflow:scrollにバグがあるということなのでしょうか?

関連するQ&A

  • css(div)の中にtableタグを使うとなぜかcellpaddingがきかない

    cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか?また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }

  • tableタグについて

    tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示(Chrome)では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか? どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}

    • ベストアンサー
    • CSS
  • tableタグについて

    どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。  そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか? お願いします。

  • IEではうまく行くのですが他のブラウザでも表示できるように…

    下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>

  • 【CSS】floatで左右に並べた<div>のマージンが効かない。

    CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A">   <div class="B">    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div>   <div class="C" >    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div> </div> 【CSS】--------------------------------- #A {     margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }

    • ベストアンサー
    • HTML
  • Layerの中にあるリンクがmacで動作しません

    以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript~window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>

    • ベストアンサー
    • HTML
  • css で指定した div と table の幅が

    html と css の勉強中です。 スタイルシートで次のように同じ幅を 指定したのですが、表とブロックの幅が 揃いません。 <style><!-- #a {width:300px;border:solid 2px} #b {width:300px;border:solid 2px} --></style> <div id="a"> <p> a b c d </p> </div> <table id="b" border="1"> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> </tr> </table> ブラウザは IE6と opera で見てみました。 お願いします。

    • ベストアンサー
    • CSS
  • OnMouseout()内部タグへ移動しても発生してしまう

    いつもお世話になります。 OnMouseout()についてですが、内部タグへ移動しても発生してしまい困っています。 下のスクリプトで、灰色の<div>タグを出たときOnMouseout()イベントが発生し、<div>タグ内にマウスポインタががある内はOnMouseout()が発生してもらいたくないのに<div>タグ内にある<table>タグ内へ移動したときも発生してしまいます。 z-indexで、<div>タグを一番上に表示すれば良いかとやってみましたが、だめでした。 おわかりになる方なにとぞよろしくお願いいたします。 function tstOnMouseout(){ strHtml='<div style="width:200px;background-color:Silver;z-index:10;" onmouseout="this.innerHTML=\'bbbbbb\';">'; strHtml+='<table style="margin:50px;background-color:white;z-index:1;">'; strHtml+='<tr><td style="border:solid red 5px;">aaaaaaaaa</td></tr>'; strHtml+='</table>'; strHtml+='</div>'; document.write(strHtml); }

  • cssで<div>にpaddingを指定したとき

    下のように、cssで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に740pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか? また、こうなるのは、私だけなのでしょうか? <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>

    • ベストアンサー
    • HTML
  • テンプレートを使ったHP作成☆リンクタグについて

    nanosという無料のHP作成サイトでHPを作成中です。 テンプレートを使ってtopページを作ろうと思った所、リンクを貼った文字が薄いグレーになり、点線の下線までついてしまいます。カーソルをあてるとそれがピンクになります。 多分そういう設定になっているとは思うのですが、タグを見てもピンクの色指定の場所も無く、どう直したらいいのかわかりません。 ちなみに、カーソルをあてても、文字を変化させずに文字にリンクを貼りたいです。 タグのに何か設定があるのでしょうか? <br><center><pc><table width="550"><tr><td><div style=margin:10px;padding:5px;line-height:16px;></pc><nopc><table width="550"><tr><td><div style=margine:10px;padding:5px;line-height:15px;></nopc><div align="left"><font size="4" color="#000000" face="HGep021">タイトル</font> <a href="ページのurl">コチラ</a>より御入室ください。</font> </span></div></td></tr></table></center> <center><table width="550"><tr><td><div style=line-height:16px;><font size="1"> という感じです。 どこの部分がどんな表現をするのか教えていただけたらありがたいです。 宜しくお願いします。

    • ベストアンサー
    • HTML