Martin Nemeth Martin Nemeth - 6 months ago 23
CSS Question

How to disable border around images in IE 10

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

Answer

Simply set the border:

a img{
    border: 0px;
}

It works on IE10.
Simple Working DEMO
Your Code Working DEMO

Comments