cssで位置指定したテーブル下のプルダウンが見えてしまう問題
- cssで位置指定したウィンドウの下にフォームのプルダウンがあると、プルダウンの部分に穴が開いたような状態になります。
- firefox,operaでは起きずIE6で起きます。
- 何か良い手はないでしょうか。
- ベストアンサー
cssで位置指定したテーブル下のプルダウンが見えてしまう問題
cssで位置指定したウィンドウの下にフォームのプルダウンがあると、 プルダウンの部分に穴が開いたような状態になります。 firefox,operaでは起きずIE6で起きます。 何か良い手はないでしょうか。 よろしく、お願いします。 <html> <head> <style> <!-- #poplink {position:absolute;left:0px; top:30px; width:100px; z-index:9;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body> <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> <form> <select> <option>aaaa</option> <option>bbbb</option> </select> </form> </body> </html>
- fire--
- お礼率75% (64/85)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEのレンダリングの仕様上、通常の要素ではform要素に勝ることができません なので、解決方法としてはform要素に勝ることが出来、 更にその上に通常の要素を被せることが可能なiframeを配置し、 cssとの組み合わせでform要素の上にレンダリングさせます <style>内に以下の２行を追加 * html #poplink table {position:relative; top:-80px;} * html #poplink iframe{width:80px;height:80px} このcssの書き方(* html ～)はIEのみに適用させるためのものです サイズは内容に合わせて変更してください 次は<div id="poplink">にiframeを記述します <div id="poplink"> <!--[if IE]> <iframe frameborder="0" width="0" height="0"></iframe> <![endif]--> <table width="80px" height="80px"> ： ： この書き方で、IEのレンダリングモジュールを使用しているブラウザのみiframeが記述されます と、こんな感じでいかがでしょうか
その他の回答 (1)
- suzuki-_-
- ベストアンサー率77% (152/195)
俗にcssハックと呼ばれている個別ブラウザ対策です * html ～ のようにHtmlとその先頭に*(アスタリスク)及び半角スペースを併用して付けると IEしかその内容を読み込めず、他のブラウザでは反映されません この方法はIE7には適用されないとの除法(*1)もありますが、 今回IE6でということ＋手持ちにIE7がないためこの方法を取りました IE7までも適用するなら、通常sytule設定の後に <!--[if IE]> <style type="text/css"> #poplink table {position:relative; top:-80px;} #poplink iframe{width:80px;height:80px} </style> <![endif]--> のような形でも大丈夫かと思われます (*1) cssハックには下記URL先のハック一覧表が役に立つと思います http://centricle.com/ref/css/filters/
お礼
suzuki-_-さん、たびたびの回答ありがとうございました。 ハック一覧表も役に立ちそうですね。 助かります。
関連するQ&A
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- popupウィンドウでborderがcollapseなテーブル利用の問題
popupウィンドウにテーブルを使用していて、 border-collapse: collapse のボーダーがある場合に、 初期表示時点で、そのボーダーのみが表示されてしまいます。 firefox,operaでは起きずIE6で起きます。 そこで非表示にするためのjavascript をonloadで動かしているのですが、 データ量の大きいページだと、表示された後に消えるのが 見えてしまい不細工です。 最初から枠が表示されないようなcssの指定方法はないでしょうか。 <html> <head> <script> <!-- function PopupOn(Msg){ if(document.all){ MyMsg = document.all(Msg).style; MyMsg.visibility = "visible"; } else if(document.layers){ MyMsg = document.layers[Msg]; MyMsg.visibility = "show"; } else if(document.getElementById){ MyMsg = document.getElementById(Msg).style; MyMsg.visibility = "visible"; } } function PopupOff(Msg){ if(document.all) document.all(Msg).style.visibility = "hidden"; else if(document.layers) document.layers[Msg].visibility = "hide"; else if(document.getElementById) document.getElementById(Msg).style.visibility = "hidden"; } //--> </script> <style> <!-- #poplink {position:absolute;left:0px; top:30px; z-index:9; visibility:hidden;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body onload="PopupOff('poplink')" > <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> </body> </html>
- ベストアンサー
- HTML
- CSSの設定方法について
CSSは外部ファイルにし、十数枚あるHTMLに「div id=contents内にあるTableは全て共通のレイアウト」 となるよう下記のCSSを設定しました。 --------CSS----------------------------------------- #contents{margin-left: 70px;} #contents table{width: 650px; border: solid 1px #B1B2B2; border-collapse: collapse; margin: 15px 0px;} #contents tr, td ,th{padding: 4px; border: solid 1px #B1B2B2; border-collapse: collapse;} --------HTML----------------------------------------- <div id="contents"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> ------------------------------------------------------- しかし、どうしても違うレイアウトにしたいTableが出てきた為、下記CSSを追加、 HTMLは<div id="contents">の部分を<div id="login">に変更したのですが 追加CSSが反映されず、id=contentsの設定が残ったままになってしまいます。 色々いじってみたのですが、どこが間違っているのやら皆目見当がつきません。 --------追加CSS----------------------------------------- #login{text-align: center; } #login table{width: 450px; border: solid 2px #666666; border-collapse: collapse;} #login tr, td ,th{border: solid 1px #666666; border-collapse: collapse;} --------HTML----------------------------------------- <div id="login"> <table> <tr> <th>項目</th> </tr> <tr> <td>項目1</td> </tr> </table> </div> 拙い文章で恐縮ですが、ご助言いただけると大変助かります。 説明不足や意味不明箇所は補足させていただきますので、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- css
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- cssでテーブルで細い線
スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線（td？）が二重になってしまいます 一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>
- ベストアンサー
- CSS
- テーブル内のプルダウンの下に余白ができてしまう
以下のようなHTMLにて、プルダウンメニューの下になぜか余白ができてしまいます。 この余白部分を消すにはどうしたらよいでしょうか？ padding-bottomを使うのかといろいろ試していますが、解決できません。 どなたかご教授いただけますと幸いです。 <html> <body> <table border='1'> <tr> <td> コンテンツから探す </td> </tr> <tr> <td> <form> <select onChange="top.location.href=value"> <option value="#"></option> <option value="page1.html">ページ１</option> <option value="page2.html">ページ２</option> <option value="page3.html">ページ３</option> </select> </form> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSを使った丸ナンバー付きテーブルの挿入
HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。
- ベストアンサー
- HTML
- ●tableをCSSで書き直すには(HTMLソース付き)
いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 上の表の枠のように少し立体感があるようにしたいと思います。 これを、CSSにしたいのですが、border-styleをいろいろ試しても同じようになりません。 どのようにすれば良いでしょうか？ <html> <STYLE TYPE="text/css"> <!-- .TTT { border-style:ridge; padding:0px; border-width:1px; } --> </STYLE> <body bgcolor="#FF88FF"> <table width="270" border="1" cellpadding="0" cellspacing="0" > <tr> <td>こんな感じにしたいです。</td> <td>BBB</td> </tr> </table> <br> <table style="width:270px;" class="TTT"> <tr class="TTT"> <td class="TTT">なぜか、こんな感じになってしまいます。</td> <td class="TTT">DDD</td> </tr> </table> <br> </body> </html>
- 締切済み
- HTML
- テーブル・セル枠線の色
下記のようにテーブルを組むと、IEでは1pxの赤いボーダーで表示されるのですが、 ネスケだとグレーの太い線になってしまいます。 どのように変えたらよいのでしょうか。 <TABLE border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#FF5F8D" width="100%"> <TR> <TD width="50%"> </TD> <TD width="50%"> </TD> </TR> </TABLE>
- ベストアンサー
- HTML
お礼
suzuki-_-さん、どうもありがとうございます。 期待した表示になりました。こんなふうにiframeを使うとは、 思いつきませんでした。 ただ、このように表示される仕組みについて、１点わからないところが あります。* html で始まる２行はIEのためという事ですが、 文法的にみるとIEのみに適用されるようには見えません。 firefoxやoperaでは実装されていないので無視されるという事 なのでしょうか。検索してみましたが、そういう解釈でよいのか 判りませんでした。