![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.5ベストアンサー
- 回答日時:
いえ、試すのはそちらで・・
繰り返しますが、(IEの旧バージョンを気にするなら、)paddingは禁忌です。
tdに対してpaddingを使用するのではなく、その内容のtd input,td selectにmarginを設定しましょう。特にその内包要素にwidthプロパティを設定しているときは。
また、原因が:hoverによるborderの変化でしたら、td,thに対してline-heightとvertical-alignを設定しても良いでしょう。
No.4
- 回答日時:
table#table-01 td {
padding: 7px 7px 7px 7px;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
のpaddingをつけると・・・
[例]
#table-01 td {
padding: 7px 7px 7px 7px;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
↓
<td>
<select name="****">
</td>
table td{
padding:0;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
table td select,table td input,tabl td button{
margin:7px;
}
★idの必要はない。詳細度が高くなりすぎて他のtdですべて設定しなければならない。詳細度を下げて、すべてに適用させるとシンプルにわかりやすくなる。
<table class="form" summary="入力フォーム">
<tbody>
<tr>
<th abbr="date" class="indisp">入力日</th>
<td><select name="date"><option>1<option>2******</td>
</tr>
****
[CSS]
table.form{
border-collapse:collapse;
}
table.form,table.form td,table.form th{
border:ridge 1px silver;
padding:0;
}
table.form td select,table.form td input{
margin:7px;
}
table th.indisp{color:red;}
とか・・・
【補足】
idやclass名はデザインのためにつけるのではなく、あくまで文書構造を明確にするためのものです。スタイルシートはその文書構造を使ってプレゼンテーションを指定するものです。ここはもっとも大事です。
[例]table.form th.indispは、文書構造は
「formのあるtableですよ。その中に必須の(indispensable)な見出しがある」とマークアップして、スタイルシートで「入力フォームのtable(table.form)内の必須項目の見出しセル(th.indisp)の文字は赤くする。」と記述します。
そうすると、後日見直すときもHTMLを開かなくてもスタイルシートだけ見ればよい。もちろん、HTMLの修正も楽。「id=table-01」じゃ何のことかわからないでしょう。
この回答への補足
回答有難うございます
一度CSSを洗い流してみてこのようにしました
table.inputform {
margin-right: auto;
margin-left: auto;
width: 700px;
border: 1px #a9a9a9 solid;
border-collapse: collapse;
}
.inputform td {
padding: 4px 4px 4px 4px;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
input:focus,select:focus,textarea:focus{
background: #fffacd;
}
どうでしょうか?
No.3
- 回答日時:
まず、標準モードで起動するようにHTMLを変更すること(必須です)
IEが互換モードの場合、ボックスの寸法をpadding辺の外側までを計算します。本来はpadding辺の内側でないとならない。
→ボックスの寸法(Box dimensions) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
標準モードで動作させるためにはHTMLをstrictにする。
→hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 ) ( http://hxxk.jp/2008/09/29/0118 )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
その上で、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )で文法チェック
次に、paddingを使わず、それに含まれる要素のマージンで余白を決める。
この対策はもっとも基本的なことです。
回答有難うございます。最初に書かれているstrictするは最初からやっています。文法も最初からちゃんとチェックしています。ついでにCSSもチェックしています。
最後の方に書いてある paddingを使わず、それに含まれる要素のマージンで余白を決める。 の詳しいことを教えて下さい
ちなみに
table#table-01 td {
padding: 7px 7px 7px 7px;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
とか来ましたがまだ”IE”だけずれてしまいます・・・
IEさえなくなればいいんですけど(笑)
No.2
- 回答日時:
フォーカスが移った時に入力欄の枠線が出て、その分だけ外側の枠(テーブルセル?)が広がってるようです。
CSSで以下を指定してみてください。
select:active,
select:focus {
border: 0;
}
または、擬似クラスを付けない単純な、
select {
border: ----
}
で指定しているborderと同じものを指定してみてください。
他の対処法として。<td><select>-</select></td>となっている場合、
入力欄を囲っている要素、<td>のpaddingをもう少し広げてみる、
selectのmarginを広めに指定する
tdのheightを広げる
tdにoverflow: hiddenを指定する
select要素などのline-heightを広げてみる ( td *{ line-height: 1.5 } )
などの方法があると思います。
生年月日の方でセル枠が広がらないのは、ラジオボタンのマージンが十分大きいからだと思います。
回答有難うございます。ココに書いてあることをは全てやってみましたが全然効果がありませんでした(泣)
WEB制作泣かせ”IE”!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
Tableタグで作成した表の縮小
-
cssで、テーブルのtdの中の文字...
-
フォーム内容がメールでうまく...
-
CSSでテーブルを中央にする方法
-
tableがbodyにはみ出る。。
-
formのinputなどの幅100%指定
-
自身のHPにYouTube動画を貼り付...
-
<BODY>~</BODY> の中に <STYLE...
-
セルを結合してもCSSで設定した...
-
同じクラス名はつけないほうが...
-
特殊文字の検索方法
-
テーブルタグの中にdivを含めて...
-
textareaの外側の文字が下付き...
-
テーブルのヘッダとボディの幅...
-
CSSだけで<table>の<td>や<tr>...
-
<th>タグを使っても太字にしな...
-
中に<table></table>が使えるア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
divで囲んだ文字が消える
-
formのinputなどの幅100%指定
-
td要素内のdiv要素をセンタリン...
-
cssで、テーブルのtdの中の文字...
-
表とリスト(ulとtable)の違い...
-
Dreamweaver デザインビューの...
-
<img>タグにCSSのclass設定可能?
-
trとtrの間
-
Firefoxを使ってるのですがズー...
-
ブラウザによってテーブルのセ...
-
td width="180" と固定してるの...
-
vbscriptで時計を作りたい
-
テーブル内のテーブルの高さを...
おすすめ情報