title: few css issues on Internet Explorer 7 (Ie7) using bootstrap 3
body: <p>I know that bootstrap 3 is not compatible with IE7. However, I need to make it workable for the form I am building. This is not responsive.. just need to work nicely with IE7 including the error messages...</p>
  
  <p>As you can see by comparing it on IE7 and any other nice browsers like Chrome, the state and age fields are not aligned side by side as it should be. The 2nd tick box is not aligned to the right of the 1st tick box... and there is a black line over the enter details button. Any help please? </p>
  
  <p>Even though IE7 has extra low share, it is something that the client wants. I love using Bootstrap and he doesnt want any responsiveness... and doesnt even want %/em etc.. wants fixed width. Hence the code has fixed width.</p>
  
  <p>To answer another query from below, I was hoping bootstrap3 has some kind of css patch that makes it workable for IE7 or atleast direct me on how to fix the issues listed here. HOwever I did end up fixing them. So thanks guys.</p>
  
  <p>Link is here </p>
  
  <p><a href="http://staging.serviceportal.com.au/service05/discovery_2014.do" rel="nofollow">http://staging.serviceportal.com.au/service05/discovery_2014.do</a></p>
  
  <p>I solved the issue as below</p>
  
  <pre><code>body .container {
      width: 900px
  }
  body input {
      height:20px !important;
  }
  /*.form-control{
      behavior: url(http://localhost/On%20Going/Discovery/January2014/discovery/web/pie/PIE.htc); 
  }*/
  body select {
      height: 34px !important;
      width: 120px !important;
  }
  
  .firstName, .lastName, .age{
      margin-bottom:15px
  }
  
  .col-sm-6 {
  width: 50%;
  }
  .tick1{
      padding-left:0px;
      width:160px !important
  }
  
  .discoveryButton, .discovertMandatoryText{
      float:left !important
  }
  .discoveryButton{
      width:154px !important
  }
  .discoveryButton #submit{
      text-indent:-9999px;
      display:block
  }
  .discovertMandatoryText{
      width:139px !important
  }
  .col-sm-7.tick2.has-pretty-child{
      padding-left:0px;
      width:270px;
      margin-left:150px;
      margin-top:-70px;
  }
  .age-state .age{
      width:118px;
  }
  .email{
      margin-top:10px;
  }
  .stars{
      margin-left:10px;
  }
  select.state{
      margin-left:60px
  }
  .state .stars{
      margin-left:35px !important
  }
  </code></pre>
  
  <p>So what I basically did is to look in firebug in a nicer browser like Firefox and get the margin, padding and width needed. I just copied those into the IE7.css file. And it worked. Yeep it is not responsive in ie7. However, by doing what I did, I was able to make it look nicer in IE7. I guess if someone is using bootstrap3, then do look at the padding/margin/width where it is breaking in IE7. Then take those values and add in IE7 only css file. Hope it works and helps someone</p>