« The Frozen Throne版マニュアルを作成中 | メイン | 今日の戦績 »
2005年03月12日CSSで画像リンクの枠(ボーダー)を取る方法 [ MovableType ]

広告の欄に個人的に気に入っているものや、おススメのアイテムをリンクしたんですが、何故か画像リンクに枠がついてるんですよ。FireFoxで見ると無いんですけどIEだと出るんです!かなりキモイ!
今回広告の欄を作るに当たって、CSSにID属性を自分で追加してました。(これが遠因)
例えば追加したクラスが.hogeだった場合、
.hoge a:link{
適当な記述
}
.hoge a:visited{
適当な記述
}
って感じでリンクの色やスタイルを設定していると思います。
でも、設定が反映されない。
なんでだ~と思ってたら激しく勘違いしてました。これは、テキスト用の記述だから関係なかったんです!
いろいろ調べると画像に関する設定が分かったのでそれを追加して解決しました。
.hoge img{
border: none;
}
これをCSSに追加すると解決!
それから、もうひとつ画像リンクのボーダーを取る方法があるんですがこちらはHTMLに記述する方法。
CSSでデザインを変える方針に沿わないので採用しませんでしたが、一応書いときます。
<p>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
img style="border:0
ボーダー0(なくす)にするって事ですね。
(2005年3月15日修正)
2005年03月12日 21:15
コメント
ボーダー消すなら「border:none;」にしときましょう!
あと上のほう、「a:vidited」じゃなくて「a:visited」なw
投稿者 DDS250 : 2005年03月15日 03:57
修正しときます(w
投稿者 mos1210 : 2005年03月15日 04:35