やりたいことは、input要素(type="text"または"password")のテキストを入力するフィールドに余白をつくる、ということです。
http://www.crazyegg.com/account/login
このサイトのEmailやPasswordの入力フィールドのような感じです。フィールドのサイズがデフォルトより大きくなり、入力した文字の周りにある程度余白がある状態です。
Firefoxでは、
>> Style
input.text {
padding: 5px;
}
>> HTML
<input type="text" class="text" ... />
とすれば思い通りの結果が得られました。
しかしIEで上記のようにすると、フィールドのサイズが変わらずに、文字の左と上のみに余白ができてしまいます。つまり、下と右の余白が狭くなってしまいます。試しにpaddingの値を大きくたら、文字の左と上の余白が大きくなり、文字の下の部分がフィールドに収まりきらずに隠れてしまいました。
上記のサイト(http://www.crazyegg.com/account/login)では、IEでも入力フィールドに余白がある状態で表示されるので、IEでも入力フィールドに余白を設定することは可能だと思います。しかし、色々と試しても自分では解決できませんでした。
CSSに詳しい方、教えてください。
HTML/CSSを標準モードで開発していますか?
互換モードですと、ご質問のようにpaddingを設定しても上下の余白が広がりませんでしたが、標準モードならば上下の余白がしっかり広がりました。参照先のページも標準モードで開発されていました。
標準モードと互換モードの二種類があり、標準モードはよりWeb標準に添った形でCSSを解釈してくれます。
http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm
てっとりばやくやるためには、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
をHTMLファイルの冒頭に書き込んでください
ただ、互換モード前提でいろいろwidthとかを設定していると全体のレイアウトが崩れてしまうかもしれません。
互換モードでどうすればいいかは、わかりません。すみません。
IEのバグによるものではないでしょうか。
こちら(CSSレイアウトの定石 WinIE6バグ回避法:てんぽ)の
widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう
が該当しないでしょうか?
下記のような指定で回避できると思います。
input.text { height: 2em; line-height: 1.5em; padding-left: 0.5em; }
※ここでは単純にするためem単位で指定していますが、px単位でも指定は可能です。
回答ありがとうございます。
line-heightを使った方法だと、Firefoxでの表示がうまくいきませんでした。paddingと組み合わせても試してみましたが、IEとFirefoxではフィールドの高さが異なってきてしまうのでだめでした。
単一の記述でどうしてもだめなときは、IEのみに適応させる裏技でline-heightの方法を使わせていただきますが、できればそういうバッドノウハウは使いたくないところですね、、、
HTML/CSSを標準モードで開発していますか?
互換モードですと、ご質問のようにpaddingを設定しても上下の余白が広がりませんでしたが、標準モードならば上下の余白がしっかり広がりました。参照先のページも標準モードで開発されていました。
標準モードと互換モードの二種類があり、標準モードはよりWeb標準に添った形でCSSを解釈してくれます。
http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm
てっとりばやくやるためには、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
をHTMLファイルの冒頭に書き込んでください
ただ、互換モード前提でいろいろwidthとかを設定していると全体のレイアウトが崩れてしまうかもしれません。
互換モードでどうすればいいかは、わかりません。すみません。
回答ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
で標準モードにしたら、見事にうまくいきました。ありがとうございます。
input.text {
padding: 5px;
width: 300px;
height: 25px;
}
のように、widthとheightを指定する方法では如何でしょうか。
回答ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
で標準モードにしたら、見事にうまくいきました。ありがとうございます。