positioning issues in IE11 browser

Question

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}

<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

I am having a web application with many file inputs. I have hidden all the files elements and place a button. This is working correctly in IE8 to IE10 browsers. But not in IE11. Below is my code Snippet:

<style>
    #upload-file-container {
        width:50px;
        height: auto;
        overflow: hidden;
    }
    #upload-file-container input {
        position: absolute;
        top: 0; right: 0; margin: 0;
        border: solid transparent;
        border-width: 0 0 100px 200px;
        opacity: 0.0;
        filter: alpha(opacity=0);
        -o-transform: translate(250px, -50px) scale(1);
        -moz-transform: translate(-300px, 0) scale(4); 
        direction: ltr;
        cursor: pointer;
    }
    .buttonText {
        color: #FFFFFF;
        letter-spacing: normal;
        font-family: Arial, sans-serif;
        font-weight: bold;
        font-variant: normal;
        font-size: 11pt
        font-style: normal;
        text-decoration: none;
        text-transform: none;
        width: 20px;
    }
</style>

<table border=0 cellspacing=0 cellpadding=0>
    <tr> 
        <td class='buttonSpace'>&nbsp;</td>
        <td class='buttonRegHead'>&nbsp;</td>
        <td class='buttonRegBody'>
            <div  class="buttonText" id="upload-file-container">    
                <%=DipapDictionary.translate(request,"Browse")%>
                <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;"/>
            </div>
        <td class='buttonRegTail'>&nbsp;</td>
    </tr>
</table>

It is working correctly in IE10 browser. The file input is coming over the button and the button becomes clickable. So, I am able to browse the file . But in IE11 browser the html file element is coming somewhere in the top of the page and the browse button is not clickable.

Jonathan Marzullo · Accepted Answer

For IE11 you just need to define your CSS width and height of your #upload-file-container input CSS rule

http://codepen.io/jonathan/pen/LGEJQg/?editors=110

Open the above link in IE11 and you will see the browse file input trigger

#upload-file-container input {
    width:100%;
    height:100%;
}

So your CSS rule altogether looks like this:

#upload-file-container input {
    position: absolute;
    top: 0; right: 0; margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    opacity: 0.0;
    filter: alpha(opacity=0);
    -o-transform: translate(250px, -50px) scale(1);
    -moz-transform: translate(-300px, 0) scale(4); 
    direction: ltr;
    cursor: pointer;

    width:100%; /* add width */
    height:100%; /* add height */
}

There is really no need to use a CSS transform scale() or transform translate() on your #upload-file-container input element, if you need to make it fit or be bigger.

All you would need to set is a width and height of the element. Especially for IE11 since it requires a width and height since they are not being inherited by their parent elements.

AVAVT · Answer

It is quite strange because I tested your snippet on IE 9 & 10 and it wasn't working there as well.

The reason I presume is because you have prefixed transform for Opera & Mozilla vendors

-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);

But don't have a standard transform like this:

transform: translate(-300px, 0) scale(4);

Or a Microsoft-prefixed transform like this:

-ms-transform: translate(-300px, 0) scale(4);

So when I put it in, it was working as you described: run well on IE 9 & 10 but doesn't work on IE11. So I reckon this is how your actual css is supposed to be.

Anyway, to solve the problem: Apparently translate2d is not working well together with scale on IE11. So My suggestion is to remove the scale part, reducing it to simply transform: translate(-300px, 0);. And so, it works again:

#upload-file-container {
  width: 50px;
  height: auto;
  overflow: hidden;
}
#upload-file-container input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0.0;
  filter: alpha(opacity=100);
  -o-transform: translate(250px, -50px) scale(1);
  -moz-transform: translate(-300px, 0) scale(4);
  -ms-transform: translate(-300px, 0);
  direction: ltr;
  cursor: pointer;
}
.buttonText {
  color: #FFFFFF;
  letter-spacing: normal;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-variant: normal;
  font-size: 11pt font-style: normal;
  text-decoration: none;
  text-transform: none;
  width: 20px;
}
.buttonSpace {
  height: 23px;
  width: 20;
  background-image: url(/portal/images/clearpixel.gif);
}
.buttonRegHead {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_head.gif);
  background-repeat: no-repeat;
}
.buttonRegBody {
  height: 23px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_body.gif);
  background-repeat: repeat-x;
}
.buttonRegTail {
  height: 23px;
  width: 7px;
  padding: 0;
  margin: 0;
  background-image: url(/DIPAPWebAppln/images/button_regular_tail.gif);
  background-repeat: no-repeat;
}

<html>
<table>
  <tr>
    <td align="left" nowrap class="formLabel">IMAGE1:<font color="red">*</font>
    </td>
    <TD>
      <table border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td class='buttonSpace'>&nbsp;</td>
          <td class='buttonRegHead'>&nbsp;</td>
          <td class='buttonRegBody'>
            <div class="buttonText" id="upload-file-container">Browse
              <input type="file" name="realfile1" id="realfile1" onChange="if(validate())preview(this, '1');return true;" />
            </div>
          </td>
          <td class='buttonRegTail'>&nbsp;</td>
        </tr>
      </table>
    </TD>
  </tr>
</table>

</html>

Edit: since you took the effort to give different browsers different transform value, I will follow suite and use -ms-transform in my answer. But I would suggest having a standardized transform in your css as well, up to your decision.

Mårten Wikström · Answer

Consider using this much simpler approach to achieve the same thing:

<label>
    Click me!
    <input type="file" style="display:none" onchange="alert('do stuff')"/>
</label>

The file input is hidden, but clicking on the label will trigger the file dialog.

No javascript needed. No absolute positioning needed.

<input type="file"> positioning issues in IE11 browser

Tags:

javascript

html

css

internet-explorer-11

codeFreak

3 Answers

Jonathan Marzullo

AVAVT

Mårten Wikström

Recent Activity

Donate For Us