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;
}
Simply set the border:
a img{
border: 0px;
}
It works on IE10.