HTML/CSS buttons don't show in IE properly

Question

I have four buttons in an HTML form. Here is the HTML:

                <div class="fileinputs">
                    <input type="file" class="file" name="uploadedfile" />
                    <div class="fakefile">
                            <img src="../assets/images/uf_btt.png" />
                    </div>
                </div>
                <div class="fileinputs">
                    <input type="reset" class="file" />
                    <div class="fakefile">
                            <img src="../assets/images/reset_btt.png" />
                    </div>
                </div>
                <div class="fileinputs">
                    <input type="button" class="file" onclick="window.print()" />
                    <div class="fakefile">
                            <img src="../assets/images/print_btt.png" />
                    </div>                      
                </div>

Here is the CSS:

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;
}

All four buttons are displayed properly in all browsers except IE, where they are somewhat mispositioned. It seems to me that IE doesn't know how to put the picture above the 'file' input type, and therefore there is a space to the right of it, which is taken by the transparent "browse" button. If you open the page in IE and try using the buttons, you'll see what I mean: eximi.dreamhosters.com/Hawaii/html/contact_email.php Any insight, please?

Thank you!

Answer 1

This is a bit of a long shot, but try putting

position: relative;

on the styles for your buttons (i.e. .submit, .print, .reset).

I've worked on issues where this has solved some mysterious CSS problems in IE. I've found a reference that refers to this as the IE magic bullet: http://www.communitymx.com/content/article.cfm?cid=C37E0

Answer 2

IE doesn't understand css selectors like [type=button].

Uses classes instead.

I know, it's unfortunate, and annoying.. it's IE.