Menu
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;
}
256
add style="border: none;" to whatever creates the border or create a css with this attribute. This was downvoted. I still find that this is useful when applying the style to only one element. This is also a good practice when sending HTML emails, in which case you can't create a CSS rule.
On the Page Layout tab, in the Page Background group, select Page Borders. In the Borders and Shading dialog box, on the Page Border tab, under Setting, choose None. Select OK.
Remove a border from a picture Select the picture whose border you want to remove. On the Page Layout tab, in the Page Background group, select Page Borders. Click the Borders tab. Under Setting, select None.
Simply set the border:
a img{
border: 0px;
}
It works on IE10.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
