Seeking assistance with an issue I've been troubleshooting for hours.
I am working with a bootstrap 3.0 horizontal form, and here is the HTML Code:
<div class="form-group">
<div class="col-md-5">
<label class="control-label">First Name</label>
<input type="text" value="Test" name="first_name" class="form-control other">
</div>
<div class="col-md-5">
<label class="control-label">Last Name</label>
<input type="text" value="Test" name="last_name" class="form-control other">
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Gender</label>
<select name="gender" class="form-control beta">
<option value="m">male</option>
<option value="f">female</option>
</select>
</div>
</div>
Provided below is my CC code specifically for IE 7 and IE 8:
.other {
background-color: #f4f4f4;
height: 30px;
font-size: 12px;
border: none;
padding: 0;
margin: 0;
}
.form-control {
height: 30px;
line-height: 30px;
padding: 0;
}
select {
height: 30px;
padding: 0 !important;
margin: 0;
line-height: 30px;
}
label {
color: #4F959A;
padding: 0;
margin: 0;
}
I have captured screenshots from both IE 7 and IE 8:
IE7:
IE8:
My goal is to make IE 7 match the appearance of IE 8 as closely as possible. Additionally, there seems to be an alignment issue with text in the Select drop-down menu - it's not centered. Any insights would be greatly appreciated!
Thank you.