How to disable border around images in IE 10

Question

How can I disable border line arround my images, and images in a tag in Internet Explorer 10? I have tried:

 a {
outline : none;
text-decoration: none;
 }
 a img {
 border : 0;
outline : none;
 }
 img {
border : 0;
border-style: none;
 }

and also this:

 <meta http-equiv="x-ua-compatible" content="IE=edge" />

and this:

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Nothing works. I am running out of ideas. Can anybody help me please?

EDIT: Here are my html and css files:

 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8" />

<title> Title </title>
<link rel="stylesheet" href ="main.css" />
<link rel="stylesheet" href ="menu.css" />

 </head>

 <body>

 <div class = "page " align ="center">
    <div class="header">
                <img id="bannerimg">
                <img id="menubar">
    </div>

    <div class="menu">
        <table id="menubtns" border="0">
        <tr>
            <td><a href =""><img id="projekt"></a></td>
            <td><a href =""><img id="eshop"></a></td>
            <td><a href =""><img id="foto"></a></td>
            <td><a href =""><img id="video"></a></td>

        </tr>
        </table>
    </div>

    <div class= "content">
        <table id= "obsah" border="0">
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>   
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>       
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>
        <tr>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
            <td><a href =""><img id="buybtn"></a></td>
            <td> dátum: XX.XX.XXXX </td>
        </tr>
        </table>
    </div>

    <div id= "partneri"></div>
    <div id= "footer">Copyright.</div>


 </div>     
 </body>
 </html>

MAIN CSS:

 body {
 background-image:url('img/bg_image.png');
 background-repeat:no-repeat;
 margin: 0;
 }
 a img
 {
 border: 0px;
 }

 .header #bannerimg
 {
 background-image:url('img/banner.png');
 width: 1040px;
 height: 594px;
 background-repeat:no-repeat;
 outline: none;
 }

 .content
 {
 margin-top: 80px;
 margin-right: 50px;
 font-family: "Verdana";
 font-size: 20px;
 position: relative;
 }

 .content #buybtn
 {
 background-image:url('img/kupit.png');
 height: 36px;
 width: 140px;
 }

 .content #obsah
 {
 border-spacing: 60px 30px;
 }

 #partneri
 {
 background-image:url('img/partneri.png');
 height: 142px;
 width: 1012px;
 }

 #footer {
 width: 992px;
 margin-top:5px; 
 padding:15px 0; 
 text-align:center; 
 font-size:12px; 
 font-family:arial; 
 color:#FFF; 
 background:#000; 

}

MENU CSS:

 .menu
 {
 margin-top: -110px;
 margin-right: 10px;
 z-index: 2;
 position: relative;
 }

 .header #menubar
 {
 background-image:url('img/menu1.png');
 height: 121px;
 width: 992px;
 position: relative;
 margin-top:-49px;
 margin-right: 20px;
 z-index: 1;
 }

 .menu #menubtns
 {
 border-spacing: 135px 5px;
 }

 .menu #projekt
 {
 background-image:url('img/projekt.png');
 height: 37px;
 width: 184px;
 }

 .menu #eshop
 {
 background-image:url('img/eshop.png');
 height: 37px;
 width: 100px;
 }

 .menu #foto
 {
 background-image:url('img/foto.png');
 height: 37px;
 width: 76px;
 }

 .menu #video
 {
 background-image:url('img/video.png');
 height: 37px;
 width: 92px;
 }

border / outline around my images

Well, check the F12 dev tools to see where the border is coming from. — Šime Vidas, Sep 14 '13 at 21:11
You need to post an example (HTML and CSS) that actually produces the problem. Setting e.g. `a img { border: 0 }` removes the default border around images in links in IE 10 as well as in other browsers, si there is something else going on. (And `outline` has nothing to do with a border, except that it looks like one.) — Jukka K. Korpela, Sep 14 '13 at 21:12

Siamak Motlagh · Accepted Answer · 2021-08-11T15:40:17.283

12

Simply set the border:

a img{
    border: 0px;
}

It works on IE10.

edited Aug 11 '21 at 15:40

answered Sep 14 '13 at 21:35

Siamak Motlagh

5,028
7
41
65

Hi. Look again please. I have added html + css files + image. I have tried your solution, but I have result as on the picture. Can you help me please? – Martin Nemeth Sep 14 '13 at 22:04
@MartinNemeth can you upload your html css and the images somewhere? so we can see the exact problem. maybe it's something wrong with your image place addressing. – Siamak Motlagh Sep 14 '13 at 22:07
I have posted a image where you can see how my issue looks like. You can see there those "outlines" and wierd icons inside of my images. I do not have premission to upload it (I am doing it for a friend of mine) – Martin Nemeth Sep 14 '13 at 22:12
@MartinNemeth I think your problem is about the addressing of the images on your css code. cause the browser doesn't load the element background image and the border is not the actual border of the images. it's because of the images didn't load. maybe the images doesn't exist or something wrong with the addressing. try to view the source of page by right click on your browser and see the addressing. – Siamak Motlagh Sep 14 '13 at 22:19
I tried to put images in the same directory as my html and css files, but doesnt work. It works perfectly with my Opera 12.12 and it worked even when my images were in a "img" folder. – Martin Nemeth Sep 14 '13 at 22:45
@MartinNemeth why are you using such elemnt in your code -> `` ? this is an image without `src` tag. – Siamak Motlagh Sep 14 '13 at 22:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37400/discussion-between-siamak-a-m-and-martin-nemeth) – Siamak Motlagh Sep 14 '13 at 22:55

mhenry1384 · Answer 2 · 2016-05-31T17:45:49.953

I ran into this because the images were being specified using css background-image, and the img elements had no src. Setting the img tag src to a transparent png made it work in IE 10 as it does in other browsers.

function isIE() {   // http://stackoverflow.com/a/17907562/24267    
    return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); 
}

$(document).ready(function () {
   if (isIE()) {
       $("img:not([src])").each(function () { $(this).attr('src', "/MyImages/Transparent.png"); });
   }
}

Disclaimer: browser sniffing is bad.

How to disable border around images in IE 10

2 Answers2