title: input type="image" shows unwanted border in Chrome and broken link in IE7
body: <p>I have not found a solution yet...</p>
  
  <p>I tried everything</p>
  
  <pre><code>border:0;
  border:none;
  outline:none;
  </code></pre>
  
  <p>without any luck...and the funny thing is the broken link icon in IE7 which overlaps my image.</p>
  
  <p>Any suggestion?
  <a href="http://eezzyweb.com/" rel="noreferrer">link here</a></p>
  
  <p>HTML (generated by WordPress)</p>
  
  <pre><code>&lt;form id="searchform" method="get" action="http://eezzyweb.com/"&gt;
     &lt;div&gt;
    &lt;input id="s" name="s" type="text" value="" size="32" tabindex="1"/&gt;
    &lt;input id="searchsubmit" name="searchsubmit" type="image" value="" tabindex="2"/&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>input#s{
  position:relative;
  width:245px;
  height:28px;
  border:0;
  vertical-align:bottom;
  background:url(images/input-search-bkg.png) 0 0 no-repeat;
  }
  
  #searchsubmit {
  display:inline-block;
  background:url(images/submit-bkg.png) 0 0 no-repeat;
  width:30px;
  height:30px;
  border:0;
  vertical-align:bottom;
  }
  </code></pre>
  
  <p>Firefox and Opera render the image button ok, but in Chrome and Safari I get that grey border around it. 
  IE 7 and 8 add a symbol (broken icon?) over my image... I am baffled.</p>