- 締切済み
IEと同じようにFirefoxでもテーブルが表示されるには？
head内にスクロール非表示のタグを入れています。 http://aomi1111.sakura.ne.jp/temp/in/i106/index.htmlのような感じでノーフレームです。 IE7、IE6ではテーブルが画面の上から下まで表示されテーブル内でスクロールが出来ますが、Firefoxで見るとテーブルが画面下に飛び抜けてしまいテーブル内のスクロールが出ず、スクロール非表示にしてるので下が見れなくなってしまいます。上のサイトのように表示するにはどうすれば良いでしょうか？このテンプレートをノーフレームにしたいです。自分なりに(初心者です)いじくりすぎて原形がなくなりました。必要なさそうな(？)タグは載せていません。 ■CSS■ body,td,th{ font-size:70%; color:#444; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px;padding:0px; background:#fff url() repeat fixed; } body{text-align:center;} table{margin:auto;height:100%;} #table2{ filter:alpha(opacity=100); width:551px;height:100%; background:#fff; padding:0px 10px 0px 10px; overflow:auto; } #table3{ filter:alpha(opacity=90); background:#fff url() no-repeat; padding:0px; width:220px;height:100%; } ■top.html■ <head> <style type="text/css"> <!-- body{overflow:hidden;} --> </style> </head> <body> <★table cellspacing="0"> <tr><td> <div id="table2">左の本文</div> </td><td> <div id="table3">右メニュー</div> </td></tr> </table> </body> ★のtableを消してcssの#table内にfloat:left;margin-left:120px;等入れるとFirefoxでも表示されますが、その場合table2、table3を真ん中にこさせる方法が解りません。。。どなたか解る方がいましたらよろしくお願い致します。
- tanukikku
- お礼率100% (31/31)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Yohjira
- ベストアンサー率66% (14/21)
table2のheightを固定長（例えば500とか）にしたら、 スクロールバーがでたりしませんか。 IEだとスクロールバーが出なくなるようでしたら、 overflow:auto;の記述をoverflow-y:scroll;に変えてみたりとか。 ウィンドウサイズの変更に応じて、 table2のheightを変更するような処理も必要になるかもしれませんね。
関連するQ&A
- ウィンドウ全体をテーブルで表示するには？
できればウィンドウ全体をテーブルにする方法を教えて欲しいです。 左右上下に余白がなく、ウィンドウの大きさと同じ大きさでテーブルが表示される様にしたいのですが、下記のタグをどうさわっても余白ができてしまいます…。 何処が間違いなのか教えて頂けると有り難いです。 下手ですがイメージもかいてみたので見てみて下さい。 分かり辛い説明で申し訳ありませんが、よろしくお願いします。 【HTML】 <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td>たいとる</td></tr> <tr><td class="menu_td"><ul class="menu">めにゅー</ul></td></tr></table> 【CSS】 body{ background-image:url(＊＊＊); background-repeat: repeat; } .menu_td{ padding-left:20px; height:20px; background-color:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; filter:alpha(opacity=75); -moz-opacity:0.75; } .menu{ margin:0px; padding:0px; list-style-type:none; } .menu li{ width:100px; height:20px; line-height:20px; float:left; } .menu li a{ padding-left:15px; height:20px; line-height:20px; background-image:url(＊＊＊); background-position:0% 50%; background-repeat:no-repeat; display:block; } .menu li a:hover{ background-color:#efefef; } table{ border-collapse: collapse; border: 0px #999999 solid; color: #999999; font-size: 9pt; font-family: Verdana,Osaka,'MS UI Gothic'; } ul{ margin:0px; padding:0px 0px 0px 15px; list-style-type:circle; } よろしくお願いします。
- 締切済み
- CSS
- テーブルのセル間に余白が空いてしまいます
2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。 しかし、画像と文字の間（1列目と2列目の間）に余分な空白ができてしまいます。 margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。 htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか？ また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。 divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。 <!-- htmlのコード --> <body> <table width="700" border="0" > <tr> <td><center> <img src="img/top_image.png" /> </center></td> </tr> <table class="table001"> <tr> <td rowspan="2"><img src="img/aaa.bmp" /></td> <td><h2>このサイトのごあんない</h2></td> </tr> <tr> <td><p>このサイトは～～～～～～</p></td> </tr> </table> <div style="margin-top:10px"></div> <table class="table001"> <tr> <td rowspan="3"><img src="img/bbb.bmp" /></td> <td><h2>このサイトのごあんない２</h2></td> </tr> <tr> <td> <p>このサイトは～～～～～～</p> <p>また、このサイトの～～～～～～。</p> </td> </tr> <tr> <td> <p>問い合わせ</p> <p>電話番号 000-000-0000</p> </td> </tr> </table> </body> /* CSSのコード */ body { background-color:#6C6; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; font-size: 0.8em; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic",sans-serif ; } #pageBody { width: 760px ; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: #FFF; } table.table001{ background-color: #E8FECF; width: 700px; margin-left: auto; margin-right: auto; white-space:normal; } h2{ padding-left: 10px; background-color: #009900; width: 180px; color:#FFF; font-size: 1.1em; height: 25px; line-height:25px; }
- ベストアンサー
- HTML
- 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
- テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。
現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか？ テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"> <img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"> <img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"> <img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr style="position:relative; top:-4;"> <td width="33"> <a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"> </a> </td> <td><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm
- ベストアンサー
- CSS
- IE以外のブラウザで隙間ができる
お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30"> </td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30"> </td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- CSS中央そろえについて
CSSを使用し、中央そろえを行っているのですが、winNN、winOperaでテーブル事態がセンターによりません。テーブルを寄せるのには無理があるのでしょうか ▼ＣＳＳファイル -------------------- /*TABLE*/ body { border: 0; margin: 0; padding: 0; font-family:Verdana,Arial,Helvetica,sans-serif; color:#333333; background:#fff; text-align: center; } #layout #frame{ border: 0; margin: 0; padding: 0; width: 300px; background: #ccc; } -------------------- ▼HTMLファイル <div id="layout"> <table cellspacing="0" cellpadding="0" summary=" " id="frame"> <tr> <td>aaa</td> <td>aaa</td> </tr> </table> </div>
- ベストアンサー
- CSS
- IEとFirefoxでの背景表示の違いについて （CSS）
いつもお世話になっています。 CSSで枠（text_area）を作り、その背景の中央に画像表示させたいと考えています。IEでは中央に表示されるのですが、Firefoxだとtext_areaではなく画面全体の中央に配置してしまい、text_areaには一部欠けた画像が表示されます。 #text_areaに指定した内容を.contentsに書き写しても同じ状態です。 改善策をアドバイスして頂けないでしょうか？ よろしくお願いいたします。 【html】 <body> <div class="contents"> <div id="text_area">あああああ・・・</div> </div> </body> 【css】 .contents{ width:760px; height:540px; margin:0px; margin-right:auto; margin-left:auto; padding:0px; border:0px; } #text_area { overflow:auto; width:600px; height:395px; margin-top:30px; margin-left:auto; margin-right:auto; background-image: url(haikei.gif);/* サイズ：456×392PX */ background-repeat: no-repeat; background-position:center; background-attachment:fixed; }
- ベストアンサー
- CSS
- CSSでheight:100％の際の画面外の表示
初歩的な質問で申し訳ございませんが、 よろしくお願いいたします。 CSSでレイアウトする際に、 body { width:100%; height:100%; margin:0px; padding:0; background-color:#000; min-height: 100%; } html{ height:100%; } #wrap { background-color:#fff; margin:0 auto 0 auto; width:500px; height:100% } <body> <div id="wrap">テキスト</div> </body> この様にした場合に上記HTMLソースの様に テキスト量が少なく画面がスクロールしない場合は 縦100%で画面内に綺麗におさまり問題ないのですが、 テキスト量が多くなり画面外にはみ出た場合、 ウィンドウサイズ部分のみ背景色が#fffで スクロール後のウィンドウ外は背景色が#000になってしまいます。 これを対処する方法をご教授願えますでしょうか。 既出の質問であれば回答の場所に導いていただければ 非常に助かります。 何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- safariとfirefoxとでテーブルレイアウトが変わってしまい、原因がわからずに困っています。
safariとfirefoxとでテーブルレイアウトが変わってしまい、 原因がわからずに困っています。 下記のタグでテーブルを表示したいのですが、 safariでは私が頭の中で描いていた通りのレイアウトになるのですが firefoxで開くとボックスが横に伸びてしまいレイアウトが変わってしまいます。まだ素人なので原因がまったくわからず困っています。 どなたかアドバイスを頂ければ幸いです。 <style type="text/css"> marguee { background:#000000; color:#ff6699; padding:5px 0; } .profile th{ background:#fff0ff; font:10px Verdana; color:#666666; text-align:right; padding:5px; } .profile td{ background:#ffffff; font:10px Verdana; color:#333333; padding:5px; } </style> <body bgcolor="000000"> <!-- TEMPLATE START --> <div class="profile"> <div align="center"> <table bgcolor="#000000" cellspacing="1" cellpadding="0"> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> <tr> <th>Name</th> <td width="300">テキスト</td> </tr> <tr> <th>DOB</th> <td width="300">テキスト</td> </tr> <tr> <th>Height</th> <td width="300">テキスト</td> </tr> <tr> <th>POB</th> <td width="300">テキスト</td> </tr> <tr> <th>Blood Type</th> <td width="300">テキスト</td> </tr> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> </table> </div> <!-- TEMPLATE END --> </body> </html>
- 締切済み
- HTML
- Firefox2.0で背景が上段に集まってしまいます。
以下のCSS、HTMLでdiv要素を分けて3つの細いgif画像を見た目は一つの背景になるように指定しているつもりです。真ん中のdiv要素をy方向にリピートさせて記事が長くなっても背景が崩れないページを作りたいと思っております。 IE7.0では問題なく表示してくれるのですがFirefox2.0になると背景が上段に集まってしまいます。 すみませんが改善方法をアドバイスよろしくお願い致します。 【CSS】 body { font-family: "ＭＳ Ｐゴシック"; margin: 0px; padding: 0px; text-align: center; background: #E8FFFF fixed; } #wrapper { text-align: left; margin: 0px auto; padding: 0px 0px 0px 20px; height: auto; width: 900px; background: url(background_3.gif) repeat-y; } #head-background { margin: 0px auto; height: 17px; width: 900px; background: url(background_7.gif) no-repeat; padding: 0px; } #header { margin: 0px; padding: 0px; height: 20px; width: 800px; } #footer { clear: both width: 900px; background: url(background_6.gif) no-repeat; margin: 0px auto; padding: 0px; } 【HTML】 <body> <div id="head-background"> </div> <div id="wrapper"> <div id="header"> ・・・・・（ロールオーバーリンク） </div> <div id="header"> ・・・・・（MPEG画像） </div> </div> </div> <div id="footer"> </div> </BODY> </HTML>
- 締切済み
- CSS
お礼
ご回答ありがとうございます！とても嬉しいです。 IE7のウインドウサイズに合わせてhight:592px;にしてみました。 overflow:auto;のままでもスクロールは表示されました。 Firefox(少しはみ出し)、IE6(画面より小さめ)、大きいモニタサイズなどだと表示が変わるのか少し気になります。。（わがままでごめんなさい 泣）他に方法がなさそうでしたらこれで行こうと思います。 ★のtableを消すとウインドウサイズの変更に応じてスクロールされるようなので、これでtable2、table3を上手く真ん中にすることが出来ればいいのですがそれはやはり無理でしょうか？ ＞ウィンドウサイズの変更に応じて、 ＞table2のheightを変更するような処理も必要になるかもしれませんね。 ！！そんな方法があるのですか！？もし良ければ教えて頂けないでしょうか？いろいろとすみません…。
補足
他のテンプレートを参考にして、 CSSの#tableを#mainに変更し #all{text-align:left;width:790px;height:100%;margin:0px auto;padding:0px;}のタグを足すと、どのブラウザでみても変わりなく表示することが出来ました！ずっと悩んでたのですがやっとで解決しました（涙） この度は回答頂きありがとうございました！