Login input fields are stacking together in Internet Explorer 11, but not any other browser.

[tktaylor]

Example:

https://jwcc.test.instructure.com/login/ldap

In Chrome, Firefox, Safari, the input fields show up side-by-side.  In Internet Explorer, the input fields show up stacked on top of each other.  I've tried seeing where the opposing property is in my CSS, and I think it's the border I've added.  In Chrome, Firefox and Safari, the border I applied overwrites the baseline Canvas CSS, and the input fields stay side-by-side.  Internet Explorer just adds the second border with the baseline Canvas border.  I can't figure out why.

Here is my CSS:

#login_form .field-with-fancyplaceholder input#pseudonym_session_unique_id, #login_form .field-with-fancyplaceholder input#pseudonym_session_password {

  background-color: #dedebb;

  border: 2px solid #000;

  box-shadow: inset 4px 4px 10px 1px #fff;

}

[MattHanes · Accepted solution]

Probably not the most elegant solution, but you can add a fancyplaceholder span style to change it from display:inline-block to display:table-cell

[tktaylor]

That did the trick, thanks.