Kelsey Nealon
Reputation: 61
Blue border around my image link will NOT GO away in IE
I have my website at Thetotempole.ca, and I have two animal images (with links) on the side of my content box and in IE the blue border on each of the images will not go away!
Here is my HTML :
<!doctype html>
<head>
<title>The Totem Pole News</title>
<meta name="description" content=" A totem pole themed news website posting articles on music, movies, video games, mobile applications, and news.">
<link href="thecss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<link rel="icon" type="image/ico" href="images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="socialmediaplugins">
<div id="facebook"><div class="fb-like" data-href="http://www.thetotempole.ca" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div></div>
<div id="twitter"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div>
<g:plusone></g:plusone>
</div>
<div id="container">
<div id="contentbox" align="Center">
<div id="banner" align="Center">
</div>
<div id="navbar">
<a href="#">Content</a>
<a href="#">News</a>
<a href="#">Music</a>
<a href="#">Movies</a>
<a href="#">Video Games</a>
<a href="#">Stocks</a>
</div>
<div id="navbar2">
<a href="#">About Us</a>
<a href="#">Feedback</a>
<a href="#">Subscribe</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
<input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}">
<input class="css_btn_class" type="submit" value="Search">
<input type="hidden" name="sp_a" value="sp1005092e">
<input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
<div id="owl">
</div>
<div id="musicbox"><h1>
Music</h1>
<h2>Pusha T - Numbers On the Board</h2>
<p>Good song</p>
</div>
<!--End of music box (Lexi is cool)-->
<div id="moviebox">
<h1> Movies</h1>
<h2>Tangled</h2>
<p>Tangled is a good movie.</p>
</div>
<div id="owl"> <img src="images/owl.gif" alt="Music page" usemap="#Map">
<map name="Map">
<area shape="poly" coords="-1,395,104,328,154,310,181,309,195,320,223,343,232,308,229,283,218,265,216,241,219,211,221,181,214,154,211,133,226,123,232,106,235,89,236,72,238,54,229,43,215,50,207,41,192,53,185,69,174,80,153,84,121,77,90,71,80,68,60,75,49,77,31,75,1,76" href="music.html">
</map>
</div>
<div id="wolf">
<img src="images/wolf.gif" alt="Movies page" usemap="#Map2">
<map name="Map2">
<area shape="poly" coords="3,270" href="movies.html">
<area shape="poly" coords="4,22,45,50,68,65,98,71,131,84,156,87,171,73,179,61,189,54,202,63,213,78,224,106,237,122,253,138,265,148,267,164,272,179,290,193,306,212,324,219,341,231,351,246,338,260,324,263,314,265,297,268,293,275,304,278,305,288,299,300,285,304,267,297,243,284,217,269,196,263,173,261,146,258,128,263,115,273,106,278,92,274,69,267,49,264,39,266,15,270,5,270" href="movies.html">
</map>
</div>
<!-- This is the end of the contentbox -->
</div>
<!-- This is the end of the container div -->
</div>
</body>
</html>
And here is the CSS:
body {
margin-bottom:0px;
background-color:#ef4833;
font-family: Verdana, Geneva, sans-serif;
}
a {
outline : none;
border: 0;
}
a:hover {
color: #0FC;
}
#container {
width: 1000px;
height:1000px;
position:relative;
margin-right: auto;
margin-left: auto;
z-index:1;
}
#facebook {
position:fixed;
right:100px;
z-index:15;
}
#twitter {
position:fixed;
z-index:16;
right:120px;
}
#google {
position:fixed;
top:7px;
right: 135px;
}
#socialmediaplugins {
text-align: right;
position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
margin: 0px;
top: 0px;
left: 0px;
right: 0px;
z-index:14;
}
#searchbox {
background-color:#01bff6;
border-radius:4px;
}
#searchbox:hover {
background-color:#76b618;
border-radius:4px;
}
#searchbox:active {
background-color:#01bff6;
border-radius:4px;
}
#contentbox {
background-color:black;
background-image:url(images/wooden.jpg);
width: 1000px;
height: 1000px;
box-shadow:2px 2px 10px 10px #060606;
-webkit-box-shadow:2px 2px 10px 10px #060606;
-moz-box-shadow:2px 2px 10px 10px #060606;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);
}
#banner {
background-image:url(images/totempolebanner.gif);
position:absolute;
top:25px;
width:768px;
height:120px;
left:116px;
}
#navbar {
float: left;
position: absolute;
top: 145px;
left: 108px;
width: 418px;
}
#navbar2 {
position: absolute;
top: 144px;
left: 587px;
width: 349px;
}
#searchbar {
position: absolute;
top: 23px;
left: 885px;
width: 118px;
height: 69px;
}
#musicbox {
position: absolute;
top: 165px;
width:1000px;
height:325px;
border-top: black 2px solid;
z-index: 2;
background-color:green;
}
#moviebox {
position: absolute;
top: 492px;
width:1000px;
height:325px;
border-top: black 2px solid;
border-bottom: black 2px solid;
z-index: 2;
background-color: blue;
}
.css_btn_class {
font-size:9px;
position: relative;
top:0px;
right:4px;
width:90px;
height:25px;
font-family:Verdana;
font-weight:normal;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #35d914;
padding:7px 24px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
background-color:#ff9d00;
color:#ff0000;
display:inline-block;
text-shadow:0px 0px 1px #117cff;
-webkit-box-shadow: 0px 0px 0px 0px #117cff;
-moz-box-shadow: 0px 0px 0px 0px #117cff;
box-shadow: 0px 0px 0px 0px #117cff;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}.css_btn_class:hover {
width:90px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
background-color:#ffe711;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}.css_btn_class:active {
position:relative;
width:90px;
top:1px;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}
/* This css button was generated by css-button-generator.com */
#owl {
z-index: 3;
position: absolute;
top: 91px;
left: 1001px;
width: 265px;
height: 397px;
border: 0;
outline: none;
background-image:url(images/owl.gif);
}
#wolf {
z-index: 3;
position: absolute;
top: 497px;
left: 926px;
width: 512px;
height: 393px;
}
Thank you!!
Upvotes: 0
Views: 1290
Answers (4)
Carl0s1z
Reputation: 4723
You should use border:none; not border:0;
css:
img {border:none;}
Upvotes: 1
iambriansreed
Reputation: 22241
Add the class no-border to the images you don't want a border or outline and add the following to your CSS:
img.no-border {
border: none !important;
outline: none !important;
}
If you don't want any images to have a border or outline just add the following to your CSS:
img {
border: none !important;
outline: none !important;
}
Upvotes: 0
Related Questions
- how to remove blue border around links in IE9?
- Removing blue outline/border from image anchor IE
- putting an img tag inside of an a href tag causes a border around image in IE
- Image inside a link. IE draws borders around an image. How to remove borders?
- Internet explorer displaying image links with colored border
- Link on image shows border around the image in Internet Explorer
- IE image border won't go away
- Removing border around image in ie
- IE Border/Frame Appears on linked image
- ie shows border when image is clicked