title: How to move img src a few pixels down in html page
body: <p>I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.</p>
  
  <p>Anyways the image for the browse button is a little to the top.</p>
  
  <p>How can i lower it down a little?</p>
  
  <p>Here is the js fiddle.</p>
  
  <p><a href="http://jsfiddle.net/ArQ8F/" rel="nofollow">JsFiddle</a></p>
  
  <p>Here is the html and css:</p>
  
  <pre><code>    &lt;div&gt;
      &lt;div class="fileinputs"&gt;
          &lt;input type="file" class="file" /&gt;
          &lt;div class="fakefile"&gt;
              &lt;input /&gt;
              &lt;img src="search.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  div.fileinputs {
  position: relative;
  }
  div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  }
  input.file {
  position: relative;
  text-align: right;
  -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
  }
  </code></pre>