css：リンク画像の枠消し： a img { border:none} にしてもダメ

解決済

質問者：asummer
質問日時：2007/06/06 16:38
回答数：3件

リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。

下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。（色番号は長くなるので#だけにしています）a:visited img や　a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。

どなたかお分かりになったら助けてください！

.entry-body a { color:#; background-color:#; border-bottom:1px #;}

.entry-body a img { background-color:transparent; border-bottom:none;}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： tapping_h
回答日時：2007/06/06 17:21

だいぶ端折って書きますが・・・。

こちらの環境firefox2
【引用開始】
<body>

<p class="entry-body">
<a href="#">hogehgeohgoe</a>

ぱたーんいち<a href="#">abc<img src="hogege.gif">def</a><br>
ぱたーんに<a href="#"><img src="hogege.gif"></a>

</p>
</body>
【引用終り】

もし「ぱたーんいち」のようにhtmlを書いているのでしたら、abcdefの部分に<a>に設定したcssが適用されます。<a><a/>の間に<img>ありますので・・・。「ぱたーんに」なら少なくとも背景については表示されないはずです。

この回答への補足

ですよね？？
ぱたーんに、で書いているのに、背景もborderも、テキストリンクと同じになるんです。No.2さんがコメントくださったように、テキスト＝underline、画像＝border:none、にすれば、それぞれ正しく表示されるのに。もう、何が何だか分かりません。

補足日時：2007/06/06 18:19

通報する

- 0
- 件

通報する

この回答へのお礼

★★No.2さんのお礼に書いたように、a img をdivでくくったら、できました。。ダサくて悲しいんですけど。。お騒がせしました。

通報する

お礼日時：2007/06/06 18:39

No.2

回答者： dezimac
回答日時：2007/06/06 17:10

リンクテキストに下線を付けたいのなら、border-bottomではなく、

「text-decoration:underline;」と指定した方がいいですよ。

a {text-decoration: underline;}
a img {border: none;}

でうまくいきませんか？

この回答への補足

（お礼を書いた後ですが）
あ！
肝心なことを、質問文に書いていなかったことが分かりました。。

a に、paddingとmarginがとってあるってことは、
a img の a に、borderと背景が表示されてるってことですね！

初歩的なミス。。面倒ですが、 a img をdivでくくって、class作ろうと思います。多分それでうまくいきそう。ありがとうございます！

補足日時：2007/06/06 18:31

通報する

- 0
- 件

通報する

この回答へのお礼

おお！これなら、うまく、いきます！！

…ただ、リンクテキストは、paddingとmarginをとって背景色つけて、ちょっと目立つようにしてるんです。なので、underlineではなく、borderにしたくて。。何故、borderにすると、imgのスタイル指定が効かなくなるのっっと長時間なやんでいます(--;

通報する

お礼日時：2007/06/06 18:19