No border on image anchor tags

Question

I have a global rule for anchor tags in my document:

a,a:hover {border-bottom: 1px solid #ccc;} 

But the image does not look good on the images. I was curious if there is a way to remove the border of the anchor tag containing the image, only using pure css?

Answer 1

I found this: http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

Basically this is a very simple hack that looks like this:

 a img { border:none; vertical-align:top; } 

It works like a charm and has no browser conflicts: see the article for more details.

Answer 2

No, there is no selector in CSS that selects elements based on their descendants. You will need to use JavaScript or classes in CSS.

Most reliably, you should use the class attribute for all links that do not contain an image, and use the appropriate class selector in your CSS rule.

If most of your links do not contain an image, you can use the negative approach and set the class on those links that contain the image, for example class=imagelink , and use the :not(.imagelink) selector in CSS. Support :not(...) is widespread, but not universal. Another approach that does not take into account such support is to set the lower border for all links, as in your question, and then disable them for image links:

 a.imagelink {border-bottom: none;} 

Answer 3

Impossible, unfortunately! I guess I only did this with jquery.

http://www.w3schools.com/cssref/css_selectors.asp

Sophisticated CSS selector for parent of active child

Is there a parent CSS selector?

Answer 4

It is not possible to use css , but you can do it with css if you add a cssParentSelector.js script that uses jQuery . Here is an example

 a! > img { border: none; }​ 

above the css rule removes the border from the a tag if it is the parent of the img tag, but now it is not pure css , it has dependencies.

Answer 5

The vertical-align trick works [well] with opaque images and doesn’t work at all if a line-height greater than the image height (I think small social network icons).

I would like to use the decision made here, but it cancels the alignment of inline images in text blocks along with the problems above.

I decided to make a solid white box-shadow at the bottom of a > img , possibly a filter backup for IE8 and older and name it day. Does not interfere with the layout:

 a { text-underline: none; border-bottom: 1px solid blue; } a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */ filter: progid:DXImageTransform.Microsoft.Shadow... etc } 

Answer 6

As the other answers to your question say, by now this cannot be done using CSS. But if you use jQuery, this works fine:

 $(document).ready(function(){ $('a img').parent().css('border','none'); }); 

Basically, after the page loads, find the links containing the image and specify the css border: none rule ; for the parent image element, i.e. link.