468,761 Members | 1,766 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,761 developers. It's quick & easy.

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!
Jul 20 '05 #1
3 18639
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
Jul 20 '05 #2
MediaDesign <lo*******@yahoo.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.
Jul 20 '05 #3
>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 }

Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Eli | last post: by
18 posts views Thread by John at Free Design | last post: by
5 posts views Thread by David Roden | last post: by
8 posts views Thread by DJA | last post: by
1 post views Thread by boclair | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.