AnsweredAssumed Answered

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

Question asked by Tiffany Taylor on Jul 17, 2015
Latest reply on Jul 22, 2015 by Matt Hanes

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;

}

Outcomes