a:links background images and image links...

so there's the problem:
my text links have background images

and when I put links around images on my page, they too get the
background image treatment which I do not...I have tried several
possible solutions and nothing has worked:

my html code:
<div class="borderCCC">
<div class="clients"><a href="../index.html"><img
src="../images/client/1.gif" width="227" height="350" /></a></div>

my css:
a:link {
background:#F0F0F0;
background-image:url(../images/common/link_highlight.gif);
background-repeat: repeat-x;
color:#333;
font-weight:normal;
text-decoration: none;
}

my possible fixes that didn't work:
/*tried a img as well*/
a > img, a:link > img, a:hover > img{
background-image: none;
background-color: tranparent;
text-decoration: none;
}

anyone with any solutions? I would prefer to have no background image
treatment applied to the <img> tag no matter where it is found on the
page (class independent)

Thanks much!

MediaDesign wrote:

so there's the problem:
my text links have background images

and when I put links around images on my page, they too get the
background image treatment which I do not...I have tried several
possible solutions and nothing has worked:

[...snip...]

anyone with any solutions? I would prefer to have no background image
treatment applied to the <img> tag no matter where it is found on the
page (class independent)

In a word, no. What you'd want is an ancestor selector - something like
a < img - but unfortunately one doesn't exist. See the list of selectors
at http://www.w3.org/TR/REC-CSS2/selector.html

For now, you'll have to remember to put a class on the a tag, I'm
afraid. Perhaps setting the background of the image to be the same as
the page background might help? Also, it may be worth eliminating space
between the a tag and the img tag - this will sometimes show the
background. So try changing

<a href="foo">
<img src="bar" alt="baz">
</a>

to

<a href="foo"><img src="bar" alt="baz"></a>

HTH

P

MediaDesign <lost1head (AT) yahoo (DOT) com>:

so there's the problem:
my text links have background images

That really can be a problem. By itself.

and when I put links around images on my page, they too get the
background image treatment which I do not...I have tried several
possible solutions and nothing has worked:

Did you try

a img {background: white} /*'background-color' might suffice*/

'White' being the background color of the nearest ancestor element of the
'a' that has one set, which is not 'transparent'. Perhaps you need to
extend this, like so:

.foo {background-color: green}
.bar {background-color: red}
.foo a>img {background-color: green}
.bar a>img {background-color: red}

div class="borderCCC"

Better name your classes semantically, not presentationally.

div class="clients"><a href="../index.html"

Why not 'href="../"'?

img src="../images/client/1.gif" width="227" height="350" /

Here the mandatory 'alt' attribute is missing.

a:link {
background:#F0F0F0;
background-image:url(../images/common/link_highlight.gif);
background-repeat: repeat-x;
}
my possible fixes that didn't work:
background-image: none;
background-color: tranparent;

I suppose that missing s is just a typo.

If the background of the box of 'img' is transparent and the embedded
image has transparent parts as well of course the backgrounds (images and
colors) of its ancestors are shining through. Think in layers here.

--
Fighting for peace is like fucking for virginity.

my text links have background images and when I put links>around images on my page, they too get the background image>treatment which I do not [want].If the image is non-transparent, I think you could set eitherthe anchor or the image to {display:block}. That would eliminateany space where the anchor's background might show through.If you want your background on text links only, would
something like this work?

p a:link, li a:link{ background: url(gif) ...; etc }