Question

I have a html5 form which displays as expected in IE8 and above, also in Chrome, Safari, Forefox and Opera. But in IE7 the label alignment is completely different – the labels are displayed above the input fields rather than to the left of them and horizontally aligned which is what I’m after.

I haven’t found this question asked on StackOverflow, but did find something very similar looking on CSS tricks. I did have a link here but as a first time poster my question was rejected due to having more than 2 links in it (due to the additional 2 links below showing screenshots of the issue). So I had to remove it… The answer to the post on CSS tricks gives me some areas to look at, but it’s not specific – it says “Figured it out on my own. Solution involved a combination of moving the label tags and some IE conditional CSS.”

The difference in display of the form is shown in these screenshots:

IE7: http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg

IE10: http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg

HTML code:

<form id="contact" action="contact_us.php" method="post">
<div>
<label for="fullname">Your Full Name:</label>
<input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria-       required="true" >
</div>
<div>
<label for="email">Your Email Address:</label>
<input id="email" name="email" type="email" placeholder="eg. [e-mail]" required aria-    required="true" title="Please enter a valid email address">
</div>
<div>
<label for="phone">Your Phone Number (optional):</label>
<input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|( |-)?)    {10,14}" title="Please use only digits, spaces and hyphens.">
</div>
<div>
<label for="experience">Your Badminton Experience:</label>
<select name="experience">
<option value="default">Please Choose</option>
                <option value="Intermediate">Intermediate</option>
                  <option value="Advanced">Advanced</option>
                   <option value="Don't know">Don't know</option>
                   </select>                
</div>
 <div>
<label for="club_matches">Have you previously played matches for a club?:</label>
 <input type="radio" name="club_matches" value="Yes">Yes
 <input type="radio" name="club_matches" value="No" checked>No
 </div>
<div>                   
<label for="info">Additional Info / Questions: </label>
<textarea name="info" type="text">
</textarea>
</div>
<div>
<label for="blank"></label>
<input type="submit" id="submit" value="Submit Form" name="sent">
</div>
</form>

And the CSS:

   /* styles for contact form */
#contact
{
background-color: #DDE2E2;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px; 
border-radius: 10px;
border: solid slategrey 2px;
box-shadow: 3px 3px 5px slategrey;
-o-box-shadow: 3px 3px 5px slategrey;
-moz-box-shadow: 3px 3px 5px slategrey;
-webkit-box-shadow: 3px 3px 5px slategrey;
padding: 3%;
font-family: arial;
color: #0099FF;
font-weight:bold;
align:center;
width: 80%;
margin-left:40px;
}

label
{
width: 40%;
float:left;
text-align:right;
margin-right: 2em;
font-size: 0.8em;
}

label, select, textarea, input
{
margin-bottom: 1.5em;
clear:left;
margin-left: 1em;
}

#submit
{
margin-top: 5%;
margin-bottom: 0;
}

Answer 1

The problem is that you’re clearing floats for the select boxes, textareas, and inputs as well as for the labels, when you should only be clearing them for the labels.

label, select, textarea, input {
    margin-bottom: 1.5em;
    clear: left;
    margin-left: 1em;
}

Remove clear: left; from the CSS selector for label, select, textarea, input and add it to the one for label:

label {
    width: 40%;
    float: left;
    clear: left;
    text-align: right;
    margin-right: 2em;
    font-size: 0.8em;
}
label, select, textarea, input {
    margin-bottom: 1.5em;
    margin-left: 1em;
}