9

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

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

But the border doesn't look good on images. I was curious if there's a way to remove the border of an anchor tag that contains an image only using pure css?

Nojan
  • 791
  • 1
  • 10
  • 27

6 Answers6

10

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

It basically 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 article for more details.

EDIT: The border:none doesn't actually do anything useful in most circumstances. The border is on the anchor, not the img tag, so if you've already zeroed out the border on anchored images with a global CSS reset, you'll only need vertical-align:top to push the a's border up and behind the image so it's no longer visible (as long as your image is opaque).

dannymcgee
  • 392
  • 2
  • 5
  • 15
Tom Newton
  • 116
  • 1
  • 4
  • 4
    Although, i noticed somethin. iF the image is in png format and transparent, you'll be able to see the border behind it. so not cool. but again something to know about. @exotec – Nojan Jul 30 '13 at 00:04
4

No, there is currently no selector in CSS that would select elements on the basis of their descendants. You would need to use JavaScript or classes in CSS.

Most robustly, you would use a class attribute on all links that do not contain an image and use a corresponding class selector in your CSS rule.

If most of your links do not contain an image, you could use negative approach and set a class on those links that contain an image, say class=imagelink, and use a :not(.imagelink) selector in CSS. Support to :not(...) is widespread but not universal. A yet another approach, not counting on such support, is to set a bottom border on all links as in your question and then switch it off for image links:

a.imagelink {border-bottom: none;}
Jukka K. Korpela
  • 178,198
  • 33
  • 241
  • 350
2

Not possible, unfortunately! I guess I've only done this using jquery.

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

Complex CSS selector for parent of active child

Is there a CSS parent selector?

Community
  • 1
  • 1
d-_-b
  • 18,782
  • 33
  • 120
  • 200
2

It's not possible using cssbut you can do it using css if you add cssParentSelector.js script which uses jQuery. Here is an example

a! >  img { border: none; }​

above css rule removes the border from the a tag if it's the parent of an img tag, but still now it's not pure css, has dependendencies.

The Alpha
  • 131,979
  • 25
  • 271
  • 286
2

The vertical-align trick only works [well] with non-transparent images, and doesn't work at all if the a line-height is greater than the image height (think small social networking icons).

I wish I could use the accepted solution here, but it throws off alignment of inline images within text blocks, along with the issues above.

I've settled for doing a solid white box-shadow on the bottom of a > img, maybe a backup filter shadow for IE8 and older, and calling it a day. Doesn't mess 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  }
atwixtor
  • 785
  • 9
  • 24
0

As said by other answers to your question, it's not possible do it with CSS by now. But if you use jQuery, this work great:

$(document).ready(function(){

   $('a img').parent().css('border','none');

});

It basically after the page is loaded search the links containing an image and state the css rule border:none; for the parent element of the image, ie. the link.

caos30
  • 31
  • 7