Prasad Prasad - 28 days ago 11
CSS Question

Removing the image border in Chrome/IE9

I am trying to get rid of the thin border that appears for every image in CHrome & IE9.
Thru CSS, I set outline: none; border: none; Using jQuery, I also added the border=0 attribute for every image tag. But the border as shown in the image still appears. Any solution?

Attaching a HTML snippet and the CSS stack from Chrome Dev for that img

<h1>Dashboard
<span class="help-inline icon_help ui-corner-all ichack"><img class="ui-icon ui-icon-help icon ui-icon-blue" border="0"></span>
</h1>

img[border=0] {
border-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
element.style {
}
Matched CSS Rules
content.css:159
.icon {
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
common.css:236
.ui-icon-blue {
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
}
common.css:234
.ui-icon-blue, .ui-icon-yellow, .ui-icon-orange, .ui-icon-green, .ui-icon-white, .ui-icon-red {
height: 16px;
width: 16px;
}
common.css:230
.ui-icon {
background-image: url(theme/images/ui-icons_4eb305_256x240.png);
}
jquery-ui-1.8.2.custom.css:216
.ui-icon-help {
background-position: -48px -144px;
}
jquery-ui-1.8.2.custom.css:83
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_808080_256x240.png);
}
jquery-ui-1.8.2.custom.css:30
.ui-icon {
display: block;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
}
content.css:29
img, a img {
outline: none;
border: none;
}
common.css:27
img, a img {
outline: none;
border: none;
}
Inherited from span.help-inline.icon_help.ui-corner-all.ichack
common.css:325
.help-inline {
font-size: small;
}
Inherited from h1
content.css:70
.content h1 {
font-size: 18px;
line-height: 32px;
color: black;
}
user agent stylesheet
h1 {
font-size: 2em;
font-weight: bold;
}
Inherited from table#content-table
user agent stylesheet
table {
border-collapse: separate;
border-spacing: 2px;
}
Inherited from div#content
content.css:39
#content {
font-size: 10pt;
}
Inherited from body
Style Attribute {
font-size: 100%;
}
content.css:17
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
common.css:15
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}


See attached screenshot:

Screenshot

Answer

Instead of border:none; or border:0; in your css you should have

border-style:none;

You could also put this in the image tag like so

<img src="blah" style="border-style:none;">

Either will work.

EDIT

This will not work for an IMG with no SRC. The above is more for those nasty link borders that show up in some browsers and a few other applications where borders refuse to play nice. The thin border that appears when there is no SRC is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue either 1) Use a DIV instead of an IMG element (effectively creating an element with a background image is all you are doing anyway, the IMG tag really isn't being used) 2) If you want/need an IMG tag use Randy King's solution below 3) Define an image src

Comments