リンクの表示方法

[新着] Webテンプレートを仮オープンしました



0   名前: たかっぴ : 2007/04/07(土) 08:48  ID:8OCIfGtg sub-t1
申し訳ありません、誰かご教授願います。

リンク先にポイントした時に、そのリンク先の下に破線を表示させたいのですが、以下のソースで上手くいきません。
どこが悪いのか、ご教授願います。

htmファイル
<a href="URL" class="declink" >スタイルシート</a>

cssファイル
a {text-decoration : none ;}
a.declink:hover {color: #ff0000 ; border-bottom: dotted 2px red ; }

一部を抜粋しているのですが、例えば、マージンやバッディングの指定をしていた場合などは、破線が表示されなかったりするのでしょうか?
(マージン・バッディング指定を削除しても上手くいかないのですが・・・)
ソース自体に問題があるのでしょうか?

宜しくお願いします。


1   名前: カヅサツ ◆ThCi95HEzw : 2007/04/07(土) 08:48  [URL]  ID:O5hEMlpW sub-r2
IEのバグくさいですね(Operaでは普通に枠線が出る)

泥縄ですが、親要素に大きめの line-height を取るという手があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
a:link,
a:visited{
	text-decoration : none ;
}
strong,
a.declink:hover{
	color: #ff0000 ;
	border-bottom: dotted 2px red ;
}
p{
	line-height: 1.4;
}
</style>
</head>
<body>
<p><strong>強調</strong></p>
<p><a href="URL" class="declink">スタイルシート</a></p>
</body>
</html>

2   名前: DS : 2007/04/07(土) 08:48  ID:N0bKtyKT sub-t1
a {
text-decoration : none;
line-height: 2em;
}

はどうでしょうか?

※line-heightの値は適当です。

3   名前: DS : 2007/04/07(土) 08:48  ID:N0bKtyKT sub-t1
あっ、
カヅサツさんが指摘してましたね。

失礼しました。

一覧へ戻る