How to remove borders around links in IE?

Question

I have a navigation bar consisting of <img> elements in my respective <a> elements. However, for some reason in IE its dark black border around the images. This is not the same in other browsers, I cannot figure it out ... This is the html that I use.

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

I have about 5 links, everything is written like that, and I used CSS to fit it into the navigation bar. In other browsers, it looks like

but in IE it looks like

I had never encountered such a problem before, and still have not worked. Is there a way to draw these borders using CSS?

Answer 1

TL; DR

Remove the borders of all links and images:

 a, img { border:none; outline:none; } 

---

Full version

If you want to remove the borders of images that are links, you must do the following:

 a img { border:none; outline:none; } 

The only difference is that there is no comma between a and img , which means that only images inside a -tags will apply this rule

Pro tip: use css reset

Browser inconsistencies like this are numerous, so web developers often use "css reset", i.e. https://necolas.imtqy.com/normalize.css/ or http://meyerweb.com/eric/tools/css/reset/ . This will (among other great things) reset things like borders, fields, etc. On multiple elements so that they appear more consistently in browsers.

Answer 2

I believe IE places borders around images that are links. Therefore, you can remove this by saying:

 a img { border: 0; } 

Answer 3

add style="border: none;" to what creates the border, or create css with this attribute.