In CSS, I want all links to have a border-bottom: 1px solid property. However, if I have a linked image, it gets the border as well. How can I change the a property if and only if it contains an img element?
+2
A:
Try using Descendant Selectors:
a img {
border-bottom: none;
}
If it doesn't seem to be working, first make sure that the selector is correct (i.e. is referencing the correct element(s)) by putting some crazy statements in that will make it clear which elements are being affected by the selector:
a img {
color: red;
background-color: red;
border-bottom: none;
}
When the selector is working correctly, you can then focus on the statement that isn't working (don't forget to remove the crazy statements, though!). It may be being overridden somewhere, so try adding !important to the end of the statement:
border-bottom: none !important;
If this works, then you need to carefully examine your CSS code and rearrange your style rules so that you're not overriding this rule.
If it still doesn't work, then make sure that you are overriding the correct property with the correct value.
Steve Harrison
2010-02-27 09:50:24
Already tried. Don't know why but it does not work. The image has no border, but for some reason on the bottom I still have a border. Firebug highlights only the border when I hover on the a tag. and only the image if I hover on the img tag... so it seems that the a is underlining the spaces.
Stefano Borini
2010-02-27 09:57:41
He's seeing the text decoration, not an actual `border`
Squeegy
2010-02-27 11:23:14
@Squeegy: I can guarantee you I am seeing the border, not the text decoration.
Stefano Borini
2010-02-27 12:31:33
A:
....
<style>
a{border-bottom: 1px solid;}
a img{border:none;}
</style>
Sarfraz
2010-02-27 09:51:58
+2
A:
a { text-decoration: none }
You are seeing the text decoration underline default for links. You cannot, however, change the style on a tags if they contain a img tag. CSS just doesn't work that way. You could add a class to any a with an image and assign a style based on that.
CSS
a.image { text-decoration: none }
HTML
<a href="foo" class="image"><img src="foo.jpg"/></a>
Squeegy
2010-02-27 11:22:41
A:
why don't you wrap the <img> in a <span> and then use the CSS
a {border-bottom: 1px solid #33ccff;}
span a {border: none;}
pixeltocode
2010-02-27 13:20:30
A:
Especially since the standard solution doesn't work for you, some code would be very helpful.
Shooting in the dark, my suggestion is to specify border width:
a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }
or
a img { border-bottom-width:0; }
And failing either of those, I'd start looking at any other styles that would be overlapping (not necessarily being inherited, just affecting the visual space on hover), like padding and margins and background colors of containing elements.
D_N
2010-02-28 07:50:34