How to prevent the 'Gecko-underline' behind images in anchors?

[ad.von.reeken]

Hello CSS-ers,

My question is:
Is it possible to use CSS to prevent the 'Gecko-underline' behind
'anchored' images on pages with patterned background images?

The page http://www.vonreeken.demon.nl/test/gifline1.htm
shows, well if a 'Gecko' browser is used of course, that these
browsers let the background of images inherit the text-decoration
attribute of the containing anchor.

Example code:
<a href="dummy.htm" title="A dead link"><b>Photo Album</b><br>
<img src="book.gif" alt="The content"
style="border-style: none; width: 48px; height: 48px;
vertical-align: middle; "></a>

This results in the 'anchor'-underline being visible in the
transparent part of the book.gif image.

I can imagine that this may officially be correct but I like the way
Opera (7.53) and IE (6.0) handle this better (i.e. never show anchor
/text/-attributes under images).

To see the effect and read additional information, please check the
above page mentioned test page. The page has also a link to an example
page with the code stripped to the minimum is.

Thanks in advance,
a3ano

[lucy]

>Is it possible to use CSS to prevent the 'Gecko-underline'
behind>'anchored' images on pages with patterned background images?Sure. I think
it would bea img, a:hover img{ text-decoration: none; }I imagine
Gecko wouldn't underline linked images set to {display: block}, if that's
appropriate to your layout.

[ad.von.reeken]

On Mon, 11 Oct 2004 01:31:13 GMT, lucy <lu**@no.spam.pls> wrote:

Is it possible to use CSS to prevent the 'Gecko-underline'

behind>'anchored' images on pages with patterned background images?Sure. I think
it would bea img, a:hover img{ text-decoration: none; }I imagine
Gecko wouldn't underline linked images set to {display: block}, if that's
appropriate to your layout.

Thanks for the reply.
I had tried already the 'a img' construction as follows:

<style>
a:link { color: blue; text-decoration: underline; }
a:hover { color: blue; text-decoration: none; }
a img { color: blue; text-decoration: none; }
</style>

(and to rule out cascading sequence issues) also as first in the style
rule list.
But it was not successfull.

The strange inconsistency is that
a img { color: blue; background-color: red; } does results in a
red background below the image but
a img { color: blue; text-decoration: none; } does not result in
not-underlined text below the image.

Another strange inconsistency is that if only an image and no
(non-white space) text is include in the anchor, no text-decoration is
shown.

More information and examples regarding this are available on
page http://www.vonreeken.demon.nl/test/gifline1.htm

[lucy]

>I had tried already the 'a img' construction as follows:[...]> a img { color: blue; text-decoration: none; }Silly me, I wasn't thinking straight.a img { text-decoration: none;} won't do anything because the linkedimage, per se, is not underlined; what you see is the anchor'sunderline, which is "drawn through" -- but not inherited by -- itschildren.When you add a background color to the img it "covers up" thatunderline.If you really want to give the image a patterned background image thatmatches that of the page, you could set the background-attachment forboth to "fixed", so they line up.But in your test example, the easiest would be to set those images to{display: block} instead of using the line break tag <br>