- 締切済み
IEにてthタグに付加したwidth: 1em;がうまく動作しない。
.ems1 { width: 1em; } 上記のようなCSSを宣言した後、 <th class="ems1">0</th> のようなHTMLを表の中で適切なところに書いたとき、IEにてそのセルの幅が1emになりません。 Firefoxだと正常に表示されるので、書き方は間違っていないと思うのですが。。 どなたかIEでもきちんと表示できる方法を教えていただけると嬉しいです _ _
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- issa_srv
- ベストアンサー率44% (40/89)
関連するQ&A
- ie8のcssでcol要素のwidthがきかない
ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。 いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。 cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。 どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。 ------------------------------------------- htmlのソース <table class="table2"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <tr> <th class="cell12" colspan="2" align="center" nowrap>３月</th> <th class="cell12" colspan="2" align="center" nowrap>４月</th> <th class="cell12" colspan="2" align="center" nowrap>５月</th> <th class="cell12" colspan="2" align="center" nowrap>６月</th> </tr> <tr> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> </tr> <tr> <td class="cell12" nowrap>100</td> <td class="cell12" nowrap>200,000</td> <td class="cell12" nowrap>50</td> <td class="cell12" nowrap>100,000</td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> </tr> </table> ----------------------------------------- cssのソース .table2 { border : 0px solid black ; border-collapse: collapse ; margin: 0px; padding: 0px; } .col41 { /* 緑 各月 点数 */ text-align: right; width: 50px; background-color: #e0ffff ; } .col42 { /* 緑 各月 金額 */ text-align: right; width: 80px; background-color: #e0ffff ; } .col51 { /* 白 各月 点数 */ text-align: right; width: 50px; background-color: #ffffff ; } .col52 { /* 白 各月 金額 */ text-align: right; width: 80px; background-color: #ffffff ; } .cell11 { border-right : 1px solid silver ; border-bottom: 1px solid black ; } .cell12 { border-right : 1px solid silver ; border-bottom: 1px solid silver ; } よろしくお願いします。
- ベストアンサー
- CSS
- IE7でinputタグのtextがはみ出る
いつもお世話になります。 以下のソースのように、テーブルのtdの中にinputタグのtextを、widthを100%にして配置しています。 IE7でこれを表示すると、はみ出るというか突き抜けるというか、、、 という状態になっています。 これがIE8以上からだと、box-sizingを使用すればうまくいくのですが、IE7以下ではこのCSSは使えません。 IE7において、tdの中にうまく収めるためには、どのようにすればよいのでしょうか。 --------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <table border="1"> <tr> <th>テキスト</th> <td style="width: 100px;"> <input type="text" style="width: 100%;" /> </td> </tr> </table> </body> </html> --------------------------------------------- 宜しくお願いします。
- ベストアンサー
- CSS
- CSSによってIEでNNにあるmax-widthと同等の機能をさせるには？
HTMLの＜table＞タグを使わずに、CSSのpositionやfloatを使って横２段、３段組のレイアウトをしたいと考えています。 さて、この場合それぞれの段に設定した横幅よりも大きな幅を持つ画像を挿入した場合、NNではmax-widthにより画像の最大幅をコントロール出来ますが、IEではこの属性設定が出来ません。このため画像を挿入した段の横幅が画像の幅まで伸びてしまうことがあります。そこで、NNのmax-widthに相当する機能をCSSによりIE上で実現する方法をお教えください。
- ベストアンサー
- HTML
- セルを結合してもCSSで設定した一つ分の幅で表示されます
tableタグを使用して表を作成しており、幅や罫線などの装飾はすべてCSSを使用しています。 質問は、WindowsのIEのみで発生する事象についてです。 colspanで結合しているthタグやtdタグがいくつかあるのですが、それらがCSSのwidthで設定した幅の一つ分で表示されてしまうのです。 FirefoxやSafari、Mac版IEでは発生しません。結合したセルの幅で表示されます（例：widthで100pxを設定し、colspan="3"なら、300pxで表示）。 これはWindows IEのバグでしょうか？ ネット上でかなり探してみましたが、情報は得られませんでした。 解決策・回避策をご存じの方、ご教示ください。
- 締切済み
- HTML
- テーブルのtext-alignがきかない（ＩＥ７）
お世話になります。初心者ですが、アドバイスいただけると助かります。 宜しくお願いします。 セル内のテキストを中央寄せにしたいのですが、 IE7では、下記のソースだと適用されないで困っています。（左寄せになる） （さらに、テキストに対して十分なwidthがあるのに、途中で折り返されて２行になってしまう） Safari、Firefox、Opera（いずれもMac）はOKでした。 例えば．．． ●●●●●● とセルの中に表示したいのに、 ●●●● ●● と途中で折り返されてしまう、（widthは余裕があります） CSS th,td.A{ width:30px; height:35px; text-align:center; } HTML <table> <tr> <td class="A"> ●●●●●●</td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの幅
tableのwidth指定についての質問です。 同じレイアウトで複数のhtmlファイルを作るのですが、その中のテーブル及びセルの幅をwidthで固定してあるのにも関わらず、セル内のテキストの長さによって各ファイルごとのテーブルのセルの幅が、IEでの表示で変わってしまいます。 <table width="450" cellspacing="0" cellpadding="2" border="1"> <tr> <th bgcolor="#ffcccc" width="150">aaaaaaaaa</th> <th bgcolor="#ffcccc" width="286">\100,000</th> </tr> <tr> <td colspan="2">ここには商品説明が入ります。ああああああああああああああああああああああああああああああああああああ</td> </tr> </table> 上記のaaaaaaaaaの部分がファイルによって長さが違うのですが、それによってセルの幅が変わってしまいます。 IE６でプレビューすると変わりますが、firefoxでは変わりません。 <th>を<td>に変更すると、幅は固定され変わりません。 IEの場合、thでwidth指定が出来ないのでしょうか。 なぜ変わってしまうのでしょうか?どこかに記述の問題があれば教えていただければありがたく思います。
- 締切済み
- HTML
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 2行目は項目２つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか？ ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの設幅固定がオフラインで崩れます
WEBサイトでテーブルのセル幅を固定しているのですが、オンライン環境では意図通りになるものの、オフライン環境では固定されずに崩れてしまいます。 固定方法は、外部CSSで「table-layout:fixed;」と「各セルのwidth指定(class)」を記述しています（下記ご参照下さい）。 外部CSSへのリンク指定は絶対パスではなく相対パスで指定しており、オフライン環境でもCSSの参照は出来ていると思います（セル幅以外の記述内容は反映されます）。 どこに原因があるのか分からずに困っています。 お分かりになる方がおられましたら、ご教示頂きたくお願い申し上げます。 【CSS】 table.t { border:1px solid #000000; border-collapse:collapse; table-layout:fixed; font-size:13px; } table.t td{ border:1px solid #000000; height:13px; } table.t th{ border:1px solid #000000; font-size:13px; } .index{ width:155px; } .remarks{ width:100px; } .code{ width:120px; } ・ ・ ・ 【HTML】 <table class="t"> <thead> <tr> <th class="index">INDEX No.</th> <th class="remarks">Remarks</th> <th class="code">Part code</th> ・ ・ ・
- ベストアンサー
- CSS
- IE7で見出しタグ(hタグ)をみるとずれる
サイトを作成してIE7で躓いてます。 <div class="box"> <div class="top"></div> <div class="mid"></div> <div class="under"></div> </div>と <div class="box">で囲みtopとmidとunderで3等分してます。 <div class="top">をpddingで上部を10px幅をあけてます。 中に<h3>の見出しタグを入れてます。 IE8以降 クローム Firefox では10px分の幅の後に、<h3>タグが入ります。 IE6はアンダースコアハックしました。 IE７ですと<div class="top">で設定したpddingが無視されて<h3>との間に空白ができません。 IE7でも他のブラウザと同じように表示されるようにするにはどうしたらよいでしょうか？ 検索で探してみたものの見つからなかったので解決法または、解決法が記載してあるサイトを教えていただけますでしょうか？ よろしくお願いいたします。 ■test.html <div class="box"> <div class="top"> <h3>■■■■■</h3></div> <div class="mid"> ●●●この部分は文章の長さで伸びます●●●● </div> <div class="under"> </div> </div> ■CSS body{ font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 75%; line-height: 2; color: #333333; margin: 0px; padding: 0px; } h1 h2 h3 h4{ padding:0; margin:0;} .top{ width: 690px; height:70px; color:black; background: url(img/top.gif) no-repeat; padding:10px 30px 0 30px; } .mid{ width: 690px; min-height: 200px; color:black; background: url(img/mid.gif) repeat-y; padding:0px 30px 0 30px; } .under{ width: 690px; height: 20px; color:black; background: url(img/under.gif) no-repeat; } h3{ line-height: 20px; color:blue; font-size:17px; }
- ベストアンサー
- レンタルサーバ・ASP
- IEでFORMタグを入れると空白ができる
IEだけなのですがFORMタグを入れるとTABLEとTABLEの間に空白ができます。 自分なりに切り分けをしたみたところ下記のような結果になりました。 １、XHTML1.0をHTML4.0に変更すると正常に表示 ２、Firefoxで開くと正常に表示 ３、FORMタグを外すと正常に表示 ４、このhtmlファイルをローカル(自身のPC上)で表示すると正常に表示 (Webサーバにアップロードすると現象が現れる) ソースは以下の通りです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <table border="0" width="800"><tr> <td><font color="#000080"><b>サブメニュー</b></font></td> <td width="20"></td> <td align="right"> <input type="button" value="戻る" onclick=window.open("http://www.xxxx.xxx/xxx.html","_top")> </td></tr></table> ※この間に空白ができます※ <table border="1" cellspacing="0" cellpadding="5" width="800"> <tr><th nowrap class="l" width="270">商品A</th> <th nowrap class="l" width="100">商品A</th> <th nowrap class="l" width="270">商品名B</th> <th nowrap class="l" width="100">商品B</th> <p></tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> </table> </p> </html> 実際にはもっと長い表になるのですが<tr></tr>を増やせば増やすほど空白が大きくなります。 どうすれば解消できるでしょうか ご存知の方がいらっしゃいましたらご教授願います。 いろいろなサイトを拝見して試してみましたが解決できないのでよろしくお願いします。
- ベストアンサー
- HTML
