IE6におけるdisplay:block;について

質問

分かりにくい文章かもしれませんがよろしくお願いします。
HTMLで以下のようなCSS設定にしています。

■HTML部
<table>
<tr>
<td class="hoge"><a href="aaa.html">AAA</a></td>
<td class="hoge"><a href="bbb.html">BBB</a></td>
<td class="hoge"><a href="ccc.html">CCC</a></td>
</tr>
</table>

■CSS部
.hoge {
font-size: 14px;
text-align: center;
}
.hoge a {
text-decoration: none;
display:block;
}

上記例で言うと「AAA」の部分はセル内全部がリンク領域となって
クリックできるのですが、「BBB」「CCC」においてはテキスト部しか
クリック範囲がありません。（display:block;の効果が出ていない）
IE7、FireFoxで見るとすべてリンクできるようになっていました。
IE6でも同じような効果を与えたいのですがどのようにすればよいでしょうか？
よろしくお願いします。

回答No.2

abril · ベストアンサー

この様な場合、IE6ではwidthを指定しないとブロック化された時の実際の描画領域を認識できない様です。
以下はCSSのサンプルです。描画領域が分かり易い様に一時的に背景色を指定してあります。

table {
width: 600px;※←任意の値
background: #fcc;
}
.hoge {
font-size: 14px;
text-align: center;
}
.hoge a {
display: block;
width: 100%;※←幅を追加。tableの方に幅が設定されていないのであれば、ここの値は100px等、具体的な数値にして下さい。
text-decoration: none;
background: #cfc;
}

お礼

的確なご回答ありがとうございました。
無事解決することができました。

回答No.1

supokku33

こんにち。
テーブル（td）にcssを設定するのではなく、リンクのところにcssを設定するのはどうでしょう。
cssのpaddingは、上下の余白です。

■CSS部
a.hoge {
font-size: 14pt;
text-align: center;
padding:1em 1em;
}
a.hover hoge {
display:block;
text-decoration: none;
}

■HTML部
<table>
<tr>
<td><a href="aaa.html" class="hoge">AAA</a></td>
<td><a href="bbb.html" class="hoge">BBB</a></td>
<td><a href="ccc.html" class="hoge">CCC</a></td>
</tr>
</table>

お礼

ご回答ありがとうございました。