CSS help with Internet Explorer and Floats

programming web dev
1

Guys:

I’m having issues with my CSS and HTML in Internet Explorer on a form for a site i’m working on…I have everything exactly how i want it in firefox, but then when i flip to internet explorer, the following happens:

1.) the height of the “infoTitle” div is not matching up with the corresponding “infoField” div

2.) the width on six of the div’s does not match up with the rest of the div’s.

http://www.lewisweb.ws/temp/westin/requestInformation.html

If you look at the page in firefox, it’s exactly how i want it to look…this is probably going to be just some hacks i need to put in but i’m at my wit’s end. Any help would be massively appreciated.

Here’s the code:

HTML:


<div id="infoContainer" class="clearfix">
<img src="images/requestInformation.jpg" alt="Request Information" />
<form onsubmit="return validateForm();" name="form2" id="form2" method="post" action="send_contact.asp">
<p>If you would like to learn more about the exciting high-rise living at Town Center, please complete the form below and we will add you to our VIP list for news and information, or call 757-366-6648 to speak to one of our Sales Executives for additional information.</p>
<p>* denotes required fields.</p>

<div class="infoTitle">* Name:</div>
<div class="infoField"><input name="client_name" type="text" size="40" /></div>

<div class="infoTitle">* E-mail:</div>
<div class="infoField"><input name="client_email" type="text" size="40" /></div>

<div class="infoTitle">* E-mail Confirmation:</div>
<div class="infoField"><input name="confirm_email" type="text" size="40" /></div>

<div class="infoTitle">Phone:</div>
<div class="infoField"><input name="client_phone" type="text" size="40" /></div>

<div class="infoTitle">* Street Address:</div>
<div class="infoField"><input name="client_street" type="text" size="40" /></div>

<div class="infoTitle">* City:</div>
<div class="infoField"><input name="client_city" type="text" size="40" /></div>

<div class="infoTitle">* State:</div>
<div class="infoField"><select name="client_state" id="client_state">
    <option selected="selected">- Select -</option>
    <option>AK</option>
    <option>AL</option>
    <option>AR</option>
    <option>AZ</option>
    <option>CA</option>
    <option>CO</option>
    <option>CT</option>
    <option>DE</option>
    <option>DC</option>
    <option>FL</option>
    <option>GA</option>
    <option>HI</option>
    <option>ID</option>
    <option>IL</option>
    <option>IN</option>
    <option>IA</option>
    <option>KS</option>
    <option>KY</option>
    <option>LA</option>
    <option>ME</option>
    <option>MD</option>
    <option>MA</option>
    <option>MI</option>
    <option>MN</option>
    <option>MS</option>
    <option>MO</option>
    <option>MT</option>
    <option>NE</option>
    <option>NV</option>
    <option>NH</option>
    <option>NJ</option>
    <option>NM</option>
    <option>NY</option>
    <option>NC</option>
    <option>ND</option>
    <option>OH</option>
    <option>OK</option>
    <option>OR</option>
    <option>PA</option>
    <option>RI</option>
    <option>SC</option>
    <option>SD</option>
    <option>TN</option>
    <option>TX</option>
    <option>UT</option>
    <option>VT</option>
    <option>VA</option>
    <option>WA</option>
    <option>WV</option>
    <option>WI</option>
    <option>WY</option>
</select></div>

<div class="infoTitle">* Zip:</div>
<div class="infoField"><input name="client_zip" type="text" size="4" /></div>

<div class="infoTitle">Age:</div>
<div class="infoField"><select name="client_age">
    <option selected>- Select -</option>
    <option>Under 25</option>
    <option>25-34</option>
    <option>35-44</option>
    <option>45-54</option>
    <option>55-64</option>
    <option>64+</option>
</select></div>

<div class="infoTitle">Annual Income:</div>
<div class="infoField"><select name="client_income">
    <option selected>- Select -</option>
    <option>Under 50,000</option>
    <option>50,000-75,000</option>
    <option>75,000-100,000</option>
    <option>100,000-250,000</option>
    <option>250,000+</option>
</select></div>

<div class="infoTitle">I am an agent</div>
<div class="infoField"><input name="client_agent" type="radio" value="Agent"></div>

<div class="infoTitle">I am working with an agent</div>
<div class="infoField"><input name="client_agent" type="radio" value="Not Agent"></div>

<div class="infoTitle">Agent Name :</div>
<div class="infoField"><input name="client_agent_name" type="text" size="40" /></div>

<div class="infoTitle">Company:</div>
<div class="infoField"><input name="client_agent_company" type="text" size="40" /></div>

<div class="infoTitle">Agent Phone:</div>
<div class="infoField"><input name="client_agent_phone" type="text" size="40" /></div>

<div class="infoTitle">Agent E-mail:</div>
<div class="infoField"><input name="client_agent_email" type="text" size="40" /></div>

<div class="infoTitle">Finish & Send:</div>
<div class="infoField"><input type="submit" name="Submit" value="Submit"></div>

</form>

<p>Disclaimer: By registering my personal contact and demographical information on this website (including my name, phone or fax number, mailing or email address and income range), I understand that I will be contacted (via phone, fax, mail or email) so that I may receive additional information specific to this community, The Residences at Town Center. I understand that my personal information will not be sold, shared, traded or rented to others outside of the specific interest of this community and give my permission to be contacted by Rose &amp; Womble Realty, Armada Hoffler, their agents and staff, and/or their affiliates - including Advance Mortgage, Advance Title and Advance Insurance.</p>

</div>

CSS:


html, body {    
  height: 100%;
  background-color: #8A7D71;
  font-family: sans-serif;
  font-size: 10px;    
  color: #FFFFFF;
  text-align: center;
}

a {
  color: #CBC5BE;
  text-decoration: none;
}

img {
  border-style: none;
}

#container {  
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -448px; /* Half the width of the DIV tag which is 17 + 862 + 17 pixels */
  margin-top: -316px;  /* Half the height of the DIV tag which is 17 + 599 + 17 pixels */
  text-align: left;
}

#infoContainer {
  width: 500px;
  text-align: left;
  margin: 0px auto;
  background-color: #FFFFFF;
  color: #000000;
}

#infoContainer p {
  clear: both;
  display: block;
  width: 460px;
  padding: 10px;
  margin: 10px;
  background-color: #CBC5BE;
}

.infoTitle {
  float: left;
  display: inline;
  width: 165px;
  height: 25px;
  margin-bottom: 2px;
  margin-left: 10px;
  padding: 10px;
  text-align: right;
  color: #FFFFFF;  
  background-color: #4F3B30; 
}

.infoField {
  float: left;
  display: inline;
  width: 275px;
  height: 25px;
  margin-bottom: 2px;
  vertical-align: middle;
  padding: 10px;
  background-color: #CBC5BE;
}

#frameTop {  
  width: 896px;
  height: 17px;
  background-image: url(images/dropshadow_top.gif);  
  background-repeat: no-repeat;
  background-position: top left;
}

#frameLeft {
  width: 17px;
  height: 599px;
  background-image: url(images/dropshadow_left.gif);
  background-repeat: no-repeat;
  background-position: top left;
}

#flashframe {
  width: 879px;
  height: 599px;
  margin-left: 17px; 
  background-image: url(images/dropshadow_right.gif);
  background-repeat: no-repeat;
  background-position: top right;
}

#footer {
  width: 896px;
  height: 50px;
  padding-top: 8px;
  text-align: right;
  background-image: url(images/dropshadow_bottom.gif);
  background-repeat: no-repeat;
  background-position: top left;
}

#footer img {
  vertical-align: middle;
}

#disclaimer {
  width: 300px;
  height: 300px;
  text-align: left;
  margin: 0px;
}

#map {  
  width: 774px;
  height: 612px;
  margin: 0px;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */