Custom Browse button on file upload; problem IE

[xXREDXIIIXx]

OK I know how to do the trick to use your own image and just 'hide' the real button BUT i cant get it to work in IE, I have it working in FF and Chrome not tested other browsers. Link, HTML + CSS below please help

 

Link: http://www.clansngamers.com/test_upload.php

 

here is my html

<form action="test_upload.php" method="post" enctype="multipart/form-data" name="test_upload" target="_self">
  <input name="MAX_FILE_SIZE" type="hidden" value="1048576" />
  <div id="overlap">
    <input name="up1" class="overlap" type="text" /> 
  </div>
  <div id="overlapParent">
    <input type="file" name="ufile[]" onchange="this.form.up1.value = this.value;" />
  </div>
  <div id="overlap">
    <input name="up2" class="overlap" type="text" /> 
  </div>
  <div id="overlapParent">
    <input type="file" name="ufile[]" onchange="this.form.up2.value = this.value;" />
  </div>
  <div>
    <input name="submit" type="submit" class="form_field" value="Upload" />
  </div>
</form>

 

and here is my CSS:

.overlap{ 
  width: 250px;
  padding: 4px; 
  color: #999;
  border: 1px solid #333;
  background: #1c1c1c;
  font-size: 11px;
  font-weight: bold;
}
#overlap {
  position: absolute;
  width: 320px;
  background-image:url(http://media.clansngamers.com/browse.gif);
  background-position: right;
  background-repeat: no-repeat;
}
#overlapParent {
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity:0);
  float: left;
}