IE 8.0 and Chrome form formatting issue - html

Question

I have the below CSS code written for the form,
.formcontainer{
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 4px #ccc;
-webkit-box-shadow: 0 0 4px #ccc;
-moz-box-shadow: 0 0 4px #ccc;
border:1px solid #ccc;
padding:15px;
width: 740px;
margin:0 auto;
}
form {
margin:0 auto;
text-align:left;
width:100%;
background:#fff;
behavior: url(./border-radius.htc);
font-family:Calibri;
height: auto;
}
fieldset.border{
overflow:hidden;
border:1;
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px;
margin:3px 0;
}
fieldset.no_border{
overflow:hidden;
border:0;
margin:3px 0;
}
fieldset.no_border_submit{
overflow:hidden;
border:0;
text-align:center;
margin:3px 0;
}
input.effect {
float:left;
border:1px solid #ccc;
height: 20px;
padding:3px;
width:97%;
font-size:14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.9em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
.cssSubmitButton:visited {}
.cssSubmitButton:hover {
border:1px solid #333;
}
#personal_details span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
.ui-datepicker{
font-size:12px;
}
#guardian_one_details{
display:none;
}
#guardian_two_details{
display:none;
}
#guardian_three_details{
display:none;
}
#nominee_one_details{
display:none;
}
#nominee_two_details{
display:none;
}
#nominee_three_details{
display:none;
}
#nominee_percentage{
display:block;
}
#total_nominees{
display:none;
}
#first_nominee_percent{
display:none;
}
#second_nominee_percent{
display:none;
}
#third_nominee_percent{
display:none;
}
#nominee_percent_allocation{
display:none;
}
.float_left {
float:left;
width:33%;
}
.float_left_nominee_percent {
float:left;
width:25%;
}
.float_left_guardian {
float:left;
width:69%;
}
.float_right_guardian {
float:left;
width:29%;
}
The problem is that the form is rendered properly in Chrome but in IE 8 the fields are too close to each other.
How can I get the rendering done in IE and Chrome as it is in Chrome.
Form in IE
Form in Chrome
I want the spacing to be done properly in IE as it is in Chrome.
My html code (partially)
<form id="personal_details" name="personal_details" action="">
<fieldset class="no_border">
<div class="float_left">
<input type="radio" value="nominee_no" name="nomination" id="nomination_no"/>I don't want to nominate.
</div>
<div class="float_left">
<input type="radio" value="nominee_yes" name="nomination" id="nomination_yes"/>I would like to nominate.
</div>
<div class="float_left" id="total_nominees">
Total Nominees:
<select name="nominees" id="nominees" class="effect">
<option value="one">Single Nominee</option>
<option value="two">Two Nominees</option>
<option value="three">Three Nominees</option>
</select>
</div>
</fieldset>
<fieldset class="border" id="nominee_one_details"><legend>Nominee One Details:</legend>
<fieldset class="no_border">
<label>Name:</label><br /><input type="text" class="effect" name=""/>
</fieldset>
<fieldset class="no_border">
<label>Address:</label><br /><input type="text" class="effect"/>
</fieldset>
<fieldset class="no_border">
<div class="float_left"><label>Date of Birth:</label><br /><input type="text" class="effect" name="input" id="nominee_one_dob" style="width:40%";/></div>
<div class="float_left"><label>Age in years:</label><br /><input readonly="readonly" type="text" class="effect" name="input" id="nominee_one_years" value="0" style="width:20%;" /></div>
<div class="float_left"><label>Relationship:</label><br /><input type="text" class="effect" style="width:95%" /></div>
</fieldset>
<fieldset class="no_border" id="guardian_one_details">
<div class="float_left_guardian">
<label>Guardian Name:</label><br /><input type="text" class="effect" /></div>
<div class="float_right_guardian"><label>Guardian PAN:</label><br /><input type="text" class="effect" /></div>
</fieldset>
</fieldset>

Answer 1

use the following style in css
fieldset.no_border{
overflow:hidden;
border:0;
padding:0;
margin:0 0 10px 0;
}
.float_left_guardian{
overflow:hidden;
margin-bottom:10px;
}
hope this will solve your issue.