Removing underlining from image link

Question

I have a page with a single large image that also has a link element, and I'd like to remove the underlining from the image link. I am working in Chrome, which displays the highlighting under the image link and claims the css is introduced byuser agent stylesheet, which I understand is Chrome's default css. The user agent stylesheet brings the following style to my page:

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

How can I remove the underlining from this image link? I tried setting the id of my link and image to img-link then targeting that id with the following css, but haven't had any luck:

<a id="img-link" href="/images/post_images/mapping_early_english_books/provincial_printing.png" data-lightbox="provincial_printing" data-title="My caption">
  <img id="img-link" src="/images/post_images/mapping_early_english_books/provincial_printing.png" alt="Provincial Printing" style="width:100%" /></a></p>

#img-link {
    text-decoration: none;
}

Any help others can provide on removing this underlining will be greatly appreciated!

Answer 1

#img-link, #img-link img{
   text-decoration: none !important;
   border:0px !important;
   outline:none;
   border-width: 0px;
   outline-width:0px;
   border-bottom: none;
}

Answer 2

just set the border property to zero:

#img-link {
   text-decoration: none;
   border: 0 !important;
}