/* CSS･スタイルシート質問スレッド【27】 */

<dl class="foo">
<dt>name</dt>
<dd><input></dd>
<dt>mail</dt>
<dd><input></dd>
<dt>message</dt>
<dd><textarea></textarea></dd>
<dt>password</dt>
<dd><input></dd>
</dl>

とやって、
.foo dt{
width : 8em;
float : left;
clear : left;
}
とやって、項目と入力欄を並べてるんですが、
dtに枠（border）を用いているせいでdt要素とdd要素の高さが違い、
Operaで見ると入力欄が少しずつ上にずれ込んでしまいます。

floatは前出のボックスの右肩より上にいかない、が正しいと思ってたんですが、どうすれば解決しますか？

あと、Mac+Safariでpassword入力欄がtextareaに重なってます。これも原因がわかりません。

どなたかお知恵をお貸し下さい。お願いします。

<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><font color=#000000>あいうえお</font></td>
</tr>
</table>
こんな感じでフォントカラーが指定されてるとします。HTMLに記述する事は出来ません
CSSのみでフォントカラーを変えるにはどのようにすればよいでしょうか?

>>491
dd要素への指定はどうなってるの？

>>492
td * {color:#f00;}とか適当に。

>>492
td{
color : #000000;
background : transparent;
}

table要素の幅もCSSでやりましょう。

>>493
dd要素への指定は何もありません。

>>495
それではダメです。floatによる段組のやり方として間違ってます。>>452を読んで頂戴。

>dtに枠（border）を用いているせいでdt要素とdd要素の高さが違い、
これも、dd要素にdtと同じ幅のborderを指定してやれば解決するはず。
borderを表示したくなければborder-colorを背景色と同じにすればよし。

>>495
ＦＡＱ（>>8）を見てないのですか？
Q9.dt・ddを横並びにしたいのですが。（会話文など）
A9.floatとmargin-leftの応用で。下記サイトを参照のこと。
「<dl> の整形」
　http://www.remus.dti.ne.jp/~a-satomi/nikki/2001/12b.html#d18n03

>>496
あ。
ddに高さをあたえることばかり考えてました。でも、
dtのフォントサイズなんて変わるしなぁ、って。
一度迷いだすと他の方法って見えなくなっちゃいますね。ありがとうございます。

あと、
＞あと、Mac+Safariでpassword入力欄がtextareaに重なってます。これも原因がわかりません。
が真剣にわからないんです。できましたらお願いいたします。

>>497
ああ、こちらもありがとうございます。
＞floatは前出のボックスの右肩より上にいかない、
というので、頭がいっぱいで、既出の問題とは違うミスをやらかしてると思い込んでました。

>>496
> これも、dd要素にdtと同じ幅のborderを指定してやれば解決するはず。
ダメでした。dd要素に文字列があれば文字の高さ+borderの幅でいけると思うんですが、
dd要素の中身がinput要素だけなので、borderを追加していない状態の時点で高さが違います。

>>498
＞あと、Mac+Safariでpassword入力欄がtextareaに重なってます。

ddにmargin-left:8.5em;とか指定して直した？　それでも変りないの？
他にHTMLやCSSの記述でミスはないか、validatorでチェックして。
それでも原因がわからなければ、Safariのバグかと。
下記へ報告してくれませんか。
　CSS/DHTMLバグ辞典スレッド 第３版
　http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50
こちとらWindowsなんで再現できんのですよ。

input要素、select要素などを1emに指定すれば、
dd要素の高さがdt要素と同等になりますが、
そのために入力欄をデカくするのもあれだし、
dd要素にこじつけの文字を入れて高さを保つのは好ましくないし、
dd要素を1emとやっても、input要素の1文字分（80%くらいの文字の大きさかな？）にしかならないし。

「input要素、select要素などを1em」くらいしか解決策ないんですかね。

>>500
>dd要素に文字列があれば
>dd要素の中身がinput要素だけなので

？　input要素でもtype="text"とかtype="radio"とかあるでしょ。
まさかtype="hidden"ではあるまいし。

>>501
まだローカルでテストしてる段階なので、
Safariではチェックできてないんです（アップされてるファイルのSafariでのスクショを公開してくれるサイトを利用してるので）

validatorでは問題なしでした。
自分も恐らくSafariの解釈に問題があると思うんですが。

>>503
input要素の高さが0.8emくらいしかない、という意味です。
でも、全てのUAがそのサイズとも限らないので、それを基準にするのも無理ですし……。

>>502
>dd要素にこじつけの文字を入れて
input要素だけでlabel要素は入れないのかな。それは不便だ。
いっぺん、inputの属性とか省略しないでソースを全部書いてくれない？

>>506
<dl class="form">
<dt><input type=hidden name=kan value="漢字"><input type=hidden name=a value=regist><label for="NAME">名前</label></dt>
<dd><input id="NAME" type="text" tabindex="1" accesskey="n" size="15" name="name" maxlength="20" value="名前" onfocus="if(value=='名前')value='';onfocus=null"></dd>
<dt><label for="MAIL">E-mail</label></dt>
<dd><input id="MAIL" type="text" tabindex="2" accesskey="e" size="20" name="email" maxlength="40" value="E-MAIL" onfocus="if(value=='E-MAIL')value='';onfocus=null"></dd>
<dt><label for="WEBPAGE">Website</label></dt>
<dd><input id="WEBPAGE" type="text" tabindex="3" accesskey="w" size="25" name="webpage" maxlength="60" value="http://"></dd>
<dt><label for="TITLE">題名</label></dt>
<dd><input id="TITLE" type="text" tabindex="4" accesskey="s" size="30" maxlength="40" name="subject" value="題名" onfocus="if(value=='題名')value='';onfocus=null"></dd>
<dt><label for="MESSAGE">本文</label></dt>
<dd><textarea id="MESSAGE" name="message" tabindex="5" accesskey="m" rows="5" cols="40" onfocus="if(value=='本文')value='';onfocus=null">本文</textarea></dd>
<dt><label for="PASSWORD">削除パスワード</label></dt>
<dd><input id="PASSWORD" type="password" size="10" tabindex="6" accesskey="p" maxlength="8" name="pass"></dd>
</dl>

>>491ではクラス名をfooとしてましたが、実際はformにしてあります。

dtとddに同じ値のpadding-top（とborder-top）を指定すれば、高さは揃ってくれるだろ。

>>508
dt要素の高さ（1em）+border（1px）
と等しくするための必要な不足分、の算出方がわからないんです。
IEとOperaではdd要素の中身のinputなどは0.8emくらいですが、
仕様書にはinput要素のデフォルトの高さは定義されてませんし、
かならずその大きさでレンダリングされるとは限らない、と思ったのですが。

textareaだけcol属性のため他より高さがあるんだよね。
たぶんSafariはこのバグと同じ解釈なのでは。

先行するフロートの上方に後続のフロートが置かれる
http://cssbug.at.infoseek.co.jp/detail/winie/b093.html
http://cssbug.at.infoseek.co.jp/detail/opera/b044.html

詳しくは下記にてどうぞ。
CSS/DHTMLバグ辞典スレッド 第３版
http://pc2.2ch.net/test/read.cgi/hp/1050844510/l50

>>509　いや、>>508のやり方で上辺だけは揃ってくれるのでは？

>>508
万が一dd要素の方が大きくなっても、dt要素が上にずれ込むことはないみたいです。
上下に1pxずつとって、ひとまず解決とします。
ありがとうございました。

>>510
なるほど、textareaの高さが原因でしたか。
紹介下さったところを参照してみます。有難う御座いました。

>>511
>>512でも書きましたが、今度は逆にdd要素がデカくなったら、を危惧してたんですが、試して問題なかったみたいです。
本当に有難う御座いました。