I'm dealing with a specific issue in IE11 that's been really frustrating. Take a look at the form image below:
Everything works fine except for when users interact with form fields in the right column on IE11. It causes input fields in the left column to shift downwards:
Furthermore, if someone enters information in a field on the left side and then clicks or tabs into the right column, everything displays correctly:
Below is the HTML code snippet:
<div class="container-border">
<h2>Billing Address:</h2>
<input id="search" name="search" placeholder="Start typing a postcode or address" type="text" value />
<div class="left container-half">
<input id="firstname" name="firstname" placeholder="First name(s)" type="text" value />
</div>
<div class="right container-half">
<input id="lastname" name="lastname" placeholder="Last name" type="text" value />
</div>
<div class="left container-half">
<input id="address1" name="address1" placeholder="Address 1" type="text" value />
</div>
<div class="right container-half">
<input id="address2" name="address2" placeholder="Address 2" type="text" value />
</div>
<div class="left container-half">
<input id="city" name="town" placeholder="City" type="text" value />
</div>
<div class="right container-half">
<input id="postcode" name="postcode" placeholder="Postcode" type="text" value />
</div>
<div class="left container-half">
<select class="country" id="country" name="country">
<option value="">Country</option>
<option selected="selected" value="GB">United Kingdom</option>
</select>
</div>
</div>
Here's the CSS code:
.left {
float: left;
}
.right {
float: right;
}
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 520px;
}
@media screen and (max-width: 520px) {
.container {
margin-left: 0;
margin-right: 0;
}
}
.container-half {
width: 50%;
}
.container-half input[type="text"] {
width: 90%;
overflow: hidden;
}
.container-half select {
width: 90%;
overflow: hidden;
}
@media screen and (max-width: 520px) {
.container-half {
width: 100%;
float: left;
}
.container-half input[type="text"],
.container-half select {
width: 100%;
float: left;
}
}
input[type="text"] {
float: inherit;
background-color : rgb(76, 171, 148);
box-shadow: none;
border: none;
width: 100%;
padding: 12px;
margin-top: 3px;
margin-bottom: 3px;
color: white;
}
select {
padding: 12px;
float: inherit;
margin-top: 3px;
margin-bottom: 3px;
background-color: rgb(76,171,148);
color: white;
display: inline-block;
border:none;
width: 45%;
box-shadow: none;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor:pointer;
}
Any thoughts on what might be causing this strange behavior in IE11? The layout looks perfect in FF and Chrome.
Thank you,
Mike