Question

I have a navigation bar which consists of a <img> elements within their respective <a> elements. However, for some reason in IE its making a dark black border around the images. Its not doing the same in other browsers, I can’t seem to figure this out… This is the html that I’m using.

<li>
   <a href="#">
      <span id="nav1">
         <img src="tt_1.png" />
      </span>
   </a>
</li>

I have about 5 links all written like that and I’ve used CSS to style it into a nav bar. On other browsers it comes out like this

but on IE it comes out like this

I’ve never encountered a problem like this before and what I’ve reserached to try and fix it so far haven’t worked. Is there a way to take out these borders using CSS?

Answer 1

TL;DR

Remove borders from all links and images:

a, img {
    border:none;
    outline:none; /* this breaks accessibility */
}

---

**Full version**

If you only want to remove borders from images that are links, you should do the following:

a img {
    border:none;
    outline:none; /* this breaks accessibility */
}

The only difference is that there is no comma between a and img meaning only images inside a-tags will have this rule applied

Pro tip: Use a css reset

Browser inconsistencies like this one are numerous, so web developers often use a "css reset" i.e. https://necolas.github.io/normalize.css/ or http://meyerweb.com/eric/tools/css/reset/. This will (among other nifty things) reset things like borders, margins, etc. on a number of elements so they render more consistently across browsers.

Note on accessibility

The dotted outline, that is often judged as disturbing by developers, has a very important function for keyboard users.

You should never remove it. If you do, you need to find another visual indicator of where focus is, by adding a :focus style