I have four buttons in an HTML form.
Here is the HTML:
<tr>
<td>
<div class="fileinputs">
<input type="submit" name="submit" class="submit" />
</div>
<div class="fileinputs">
<input type="file" class="file" name="uploadedfile" />
<div class="fakefile">
<img src="uf_btt.png" />
</div>
</div>
<div class="fileinputs">
<input type="reset" class="reset" />
</div>
<div class="fileinputs">
<input type="button" class="print" onclick="window.print()" />
</div>
</td>
</tr>
Here is the CSS:
.submit {
background: transparent;
background-image: url(submit_btt.png);
border: none;
padding: 0;
margin: 0;
text-indent: -9999px;
}
.print {
background: transparent;
background-image: url(print_btt.png);
border: none;
padding: 0;
margin: 0;
text-indent: -9999px;
}
.reset {
background: transparent;
background-image: url(reset_btt.png);
border: none;
padding: 0;
margin: 0;
text-indent: -9999px;
}
input[type=submit]
{
width: 119px;
height: 47px;
}
input[type=button]
{
width: 119px;
height: 47px;
}
input[type=reset]
{
width: 119px;
height: 47px;
}
input[type=file]
{
width: 119px;
height: 47px;
}
div.fileinputs {
position: relative;
float: left;
}
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;
}
It works fine in all browsers, and only in IE you can see just one button ('file') on the screen instead of four.
Any insight, please?
Thank you!