Removing the image border in Chrome/IE9

Question

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS:

outline: none; border: none; 

Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?

body {      font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;  }  img, a img {      outline: none;      border: none;  }  .icon {      width: 16px;      height: 16px;      text-indent: -99999px;      overflow: hidden;      background-repeat: no-repeat;      background-position: -48px -144px;      background-image: url(theme/images/ui-icons_0078ae_256x240.png);      margin-right: 2px;      display: inline-block;      position: relative;      top: 3px;  }

<h1>Dashboard <img class="icon" border="0"></h1>

See attached screenshot:

Answer 1

It's a Chrome bug, ignoring the "border:none;" style.

Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.

So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...

#dlbutn {     display:block;     width:0px;     height:0px;     outline:none;     padding:43px 51px 43px 51px;     margin:0 auto 5px auto;     background-image:url(/images/download-button-102x86.png);     background-repeat:no-repeat; } 

Voila! Works everywhere and gets rid of the outline/border in Chrome.