Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No border on anchor tags that contain an image

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?

like image 437
Nojan Avatar asked Dec 29 '12 19:12

Nojan


People also ask

How do I remove the border from an image tag?

Adding border="0" to your img tag prevents that picture from having a border around the image. However, adding border="0" to every image would not only be time consuming but also increase the file size and download time. To prevent all images from having a border, create a CSS rule or file with the following code.

Can you put an image in an anchor tag?

Anchor elements, as well as img and span elements are inline by default. If we wrap an image with an anchor element, the image becomes the anchor target. We can click the image anywhere and the link will work. If there is text as well, it too can be clicked.

What is empty anchor tag?

An empty anchor is either a sign of a link with no anchor text (the entire landing page URL linked on the source URL) or an image link, which would have no anchor text. You can investigate any of your “empty anchor” backlinks by selecting the blue number of backlinks in the next column.

How do I get rid of the blue border around my photos?

Approach: We can remove this default behavior by either defining our own border or by completely removing it using css. We can select specific images using a css class or id, to select all hyperlinked images we will use the parent-child css selector.


1 Answers

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).

like image 110
Tom Newton Avatar answered Oct 19 '22 16:10

Tom Newton