Login input fields are stacking together in Internet Explorer 11, but not any other browser.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;
}
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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