Question

My form does not always render the realupload with the opacity set to 0. Does anyone see anything that I am missing?

 <style type="text/css">
   .realupload
    {
        position: absolute;
        top: 0;
        width: 270px;
        right: 0; /* start of transparency styles */
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity:0); /* IE7 and under */
        -ms-filter: "Alpha(Opacity=0)"; /* IE8 */ /* end of transparency styles */
        z-index: 3; /* bring the real upload interactivity up front */
    }
</style>

<asp:FileUpload ID="realupload" runat="server" Width="75%" OnChange="this.form.fakeupload.value = this.value; javascript: checkFile(); Remove(this); return false;"
                                CssClass="realupload" onkeydown="return (event.keyCode==9);" onpaste="return false;"
                                ToolTip="Click to browse your computer to select the File you would like to import" />

Answer 1

I came, I conquered. I ended up wrapping the fileupload control in it’s own div and setting the opacity to 0 on the div rather than the control it’s self. This took care of the interment failure of the opacity to render on the control. Thanks for the suggestions guys.

    .realuploadcontainer
    {
        position: absolute;
        top: 0;
        width: 370px;
        right: 0; /* start of transparency styles */
        /* Good browsers */
        opacity: 0.0;
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        /* IE 5-7 */
        filter: alpha(opacity=10);
        /* Safari 1.x */
        -khtml-opacity: 0.0;
        /* Netscape */
        -moz-opacity: 0.0;
        /* end of transparency styles */
    }
    #realupload
    {
        position: absolute;
        top: 0;
        width: 270px;
        right: 0; /* start of transparency styles */
        z-index: 2; /* bring the real upload interactivity up front */
    } 


    <div class="upload">
        <div class="fakeupload">
           <input type="text" name="fakeupload" id="fakeupload" onkeydown="return (event.keyCode==9);"
                  onchange="javascript: checkFile(); return false;" />
        </div>
        <div class=realuploadcontainer>
            <asp:FileUpload ID="realupload" runat="server" Width="100%" AutoPostback="false" 
OnChange="this.form.fakeupload.value = this.value; javascript: checkFile(); return false;" 
onkeydown="return (event.keyCode==9);" onpaste="return false;" 
ToolTip="Click to browse your computer to select the file you would like to import" />
        </div>
    </div>