分かりにくい文章かもしれませんがよろしくお願いします。
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でも同じような効果を与えたいのですがどのようにすればよいでしょうか?
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

この様な場合、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;
}
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/06/03 11:49

こんにち。


テーブル(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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2009/06/03 11:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング