Table styling different in Chrome - html

Question

Have a contact form that I have some options to check for contact times and methods. I had it styled correctly on Chrome, Firefox and Safari. The labels where to the left of the radio option and they were all lined up.
I have since run into the issue where the chrome style has broken and I cannot figure out what is going on as the Firefox and Safari CSS work perfectly. The page is cbasphaltmaintenance.com
<table id="contactOptionTable">
<tr>
<td>
<h1>Prefered contact method:</h1>
</td>
<td>
<input type="radio" value="home" name="contact_Method" class="contactRadioClass"/>
<label for="home">Home</label>
</td>
<td>
<input type="radio" value="mobile" name="contact_Method" class="contactRadioClass" />
<label for="home">Mobile</label>
</td>
<td>
<input type="radio" value="email" name="contact_Method" class="contactRadioClass" />
<label for="home">Email</label>
</td>
</tr>
<tr>
<td>
<h1>Prefered contact time:</h1>
</td>
<td>
<input type="radio" value="morning" name="contact_Time" class="contactRadioClass"/>
<label for="home">Morning</label>
</td>
<td>
<input type="radio" value="afternoon" name="contact_Time" class="contactRadioClass" />
<label for="home">Afternoon</label>
</td>
<td>
<input type="radio" value="night" name="contact_Time" class="contactRadioClass" />
<label for="home">Evening</label>
</td>
</tr>
</table>
Here is the css that works in safari and firefox
#contactOptionTable{
vertical-align: middle;
float: left;
padding: 0;
margin-left: 14%;
}
.contactRadioClass{
margin-top:10px;
}
I don't know what is going on here but it is bugging me. I appreciate all of the help. As you may see I'm a little wet behind the ears.

Answer 1

Add the following class in your CSS.
#contactOptionTable input
{
float:right;
}

Answer 2

You need to reduce margin-left: 5% and add width : 100% to #contactOptionTable.
However I suggest you not to use table structure here, it would be better if you create it using div's