フォーム（textarea）で幅（width）を％指定する際のメモ

テンプレを新装。というか、以前のテンプレを弄っただけです(^^;)。ついでにCSSで本文の文字サイズを100%から95%に落としてみた訳だが、本当は100%がイイ。しかし100%で野暮ったく見せないのは難しい。この辺りはセンスが無いのだろう(-"-;)。

で、文字サイズを落とした事で一行の文字数が増える。それに伴いコメントフォーム（textarea）のcolsを増やしたりした。しかし幅可変レイアウトなので、IE(IE6)でブラウザ幅を狭くしたり、文字を大きくした場合、ボックスの幅を超えた時点で横スクロールが発生するΣ(´Д｀;)。しかも他の所も弄ってた為、なかなかtextareaが原因だと気付かなかった。全然違う所を散々弄り回す始末(-"-;)

IEで文字を入力すると意味不明な横伸び・余白が..

そもそもコメントフォームはブラウザの幅で可変する領域に置いているので、textareaも一緒に幅が調節されてもイイ。という訳で、textareaを幅可変にしようとCSSでwidthをパーセント指定するも、文字を入力すると何故かIE(IE6/IE5.5)でtextareaがビヨ〜ンと伸びるw。それならばと、親要素でwidthをパーセント指定してみたら、今度は左に謎の余白が出て右にズレる(IE7 beta 2/IE6/IE5.5)。そして今度こそ！と両方指定したら両方の症状が同時に発生(IE6/IE5.5)。もう笑うしかない(*´ρ`*)

IEのためだけにhtmlを改変

行き詰ってた所に「TEXTAREAの謎の余白」という文書を発見。どうやらtextareaやinputをlabelで囲ってやると回避出来る模様（この場合、両方にwidth指定が必要。ただしマークアップによっては、labelで囲む書き方は出来ません)。

<form><p>
     <label for="comment">コメント<br /><textarea id="comment"></textarea></label>
</p></form>

form p {width: 100%;}
textarea {width: 85%;}

ただしtextareaやinputにidを振って、label for〜と関連させる書き方だと出来ない（IEはlabel for〜それ自体が無効)。label for〜それ自体は試したら逆でした(^^;)。という訳で、idで明示して更に囲んでしまうのがベターですかね（意味的には微妙だが結果的にはベター。これでIEでもクリックの的が少々ズレても大丈夫になる）

まとめると、textarea（input）の幅をCSSで％指定する場合は

• textarea（input）と、その親要素、widthを両方に指定。
• そしてtextarea（input）をlabelで囲う。

2005/11/28 | HTML/CSS | ↓コメント 2 | ↓トラックバック 0