IE6で見ると文字の下半分が隠れる
お世話になります。
HTMLは素人に毛が生えたレベルの知識しかありませんが、申し込みフォームの表示がおかしいので、直したくチャレンジしたのですが。。。
結局わかりませんでしたので、どなたかヒントだけでもいただけますでしょうか？
現象としてはIE6（おそらく7や8も同様やもしれません。。）で確認したのですが、文字の下1/4ぐらいが消えてしまうのです・・・。
Chromeでは問題なく見れるのですが、IE系ではダメなようです。
以下、実際のHTMLソースとCSSも合わせて添付します。
コピーしてそのまま使える内容になっております。
それでは、ご教授のほど宜しくお願いいたします。
-- ココからHTML ----------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<table class="basic">
<tr>
<td rowspan="3" class="leftcell">連絡先</td>
<td class="rightcell gray">
<dl><dt class="single">電話番号</dt><dd>
<input type="text" name="telephone" size="20"><span class="example">例）09012345678</span>
</dd></dl>
</td>
</tr>
<tr>
<td class="rightcell">
<dl>
<dt class="single">メールアドレス</dt><dd>
<input type="text" name="mail" size="20">
</dd>
<dt></dt><dd><small>※PCでも携帯でもどちらでも可能です</small></dd>
<dt><font color="red"><B>【ご注意】</B></font><BR><small>こちらのアドレスに<font color="red">メールが届かない場合、登録の受付ができません。</font>間違っていないかご確認下さい。</small></dt>
</dl>
</td>
</tr>
<tr></tr>
<tr>
<td class="leftcell">メルマガの配信</td>
<td class="rightcell gray">
希望する <input type="radio" name="magazine" value="1" checked="checked"> 希望しない <input type="radio" name="magazine" value="2">
</td>
</tr>
<tr>
<td class="leftcell">パスワード設定</td>
<td class="rightcell">
<dl>
<dt class="single">パスワード</dt>
<dd>
<input type="text" name="pass" size="20">4～12文字で任意の文字をご入力ください。
</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------
-- ココからCSS -----------------------------------------------------
body,
div, dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, iframe,
table, th, td {
font-size:100%;
font-style:normal;
font-weight:normal;
line-height:1.4;
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
font-size:14px;
font-family:sans-serif;
}
small {
font-size:0.8em;
}
table, td, th {
border: #888 solid 1px;
border-spacing:0;
border-collapse: collapse;
padding:2px 15px;
}
table.basic {
width:750px;
margin-bottom:10px;
background-color:#fff;
}
td.gray {background-color:#f2f2f2;}
td.leftcell{
text-align: center;
width:162px;
background-color:#fff;
line-height:1.2em;
padding:2px 0;
}
td.rightcell{
width:588px;
font-size:0.85em;
padding:3px 15px;
vertical-align:middle;
}
td.rightcell dt {
float:left;
line-height:1em;
vertical-align:middle;
}
td.rightcell dt.single {
margin-top:3px;
}
td.rightcell dt.sin {
margin-top:3px;
color: #708090;
}
td.rightcell dd {
margin-left:120px;
}
td.tdhead{
color:#000;
background-color:#CCE9FF;
padding:2px 10px;
}
input {
margin-right:15px;
}
--------------------------------------------------------------------
お礼
回答、ありがとうございます。 結局、IEのみ反映される↓の方法。 http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/?ST=webdesign&P=2 0.83emと同様？の%指定で調整することにしました。 Cromeでも問題なさそうです。