title: Form label/input alignment not as expected in IE7
body: <p>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.</p>
  
  <p>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."</p>
  
  <p>The difference in display of the form is shown in these screenshots:</p>
  
  <p>IE7: <a href="http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg" rel="nofollow">http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg</a></p>
  
  <p>IE10: <a href="http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg" rel="nofollow">http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;form id="contact" action="contact_us.php" method="post"&gt;
  &lt;div&gt;
  &lt;label for="fullname"&gt;Your Full Name:&lt;/label&gt;
  &lt;input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria-       required="true" &gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label for="email"&gt;Your Email Address:&lt;/label&gt;
  &lt;input id="email" name="email" type="email" placeholder="eg. johnsmith@gmail.com" required aria-    required="true" title="Please enter a valid email address"&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label for="phone"&gt;Your Phone Number (optional):&lt;/label&gt;
  &lt;input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|( |-)?)    {10,14}" title="Please use only digits, spaces and hyphens."&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label for="experience"&gt;Your Badminton Experience:&lt;/label&gt;
  &lt;select name="experience"&gt;
  &lt;option value="default"&gt;Please Choose&lt;/option&gt;
                  &lt;option value="Intermediate"&gt;Intermediate&lt;/option&gt;
                    &lt;option value="Advanced"&gt;Advanced&lt;/option&gt;
                     &lt;option value="Don't know"&gt;Don't know&lt;/option&gt;
                     &lt;/select&gt;                
  &lt;/div&gt;
   &lt;div&gt;
  &lt;label for="club_matches"&gt;Have you previously played matches for a club?:&lt;/label&gt;
   &lt;input type="radio" name="club_matches" value="Yes"&gt;Yes
   &lt;input type="radio" name="club_matches" value="No" checked&gt;No
   &lt;/div&gt;
  &lt;div&gt;                   
  &lt;label for="info"&gt;Additional Info / Questions: &lt;/label&gt;
  &lt;textarea name="info" type="text"&gt;
  &lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;label for="blank"&gt;&lt;/label&gt;
  &lt;input type="submit" id="submit" value="Submit Form" name="sent"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>   /* 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;
  }
  </code></pre>