Question

so I have a form that I have multiple input text fields as well as a select box or two and then 3 checkboxes. Everything lines up correctly in Chrome and looks great, then I look at it in firefox and everything except the checkboxes line up, they instead are center aligned in their area rather than being to the left like in Chrome. I have tried putting an extra div around it and everything but nothing seems to break it. Any help or errors that I am not seeing in the code?

Checkbox on the form

<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>

<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>                 

<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>

CSS File

.blueTable input,.blueTable select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    width:400px;
    margin:2px 0 20px 10px;
    text-align: left;
}
.checkbox  {
    text-align: left;
    float: left;
    vertical-align: bottom;
    position: relative;
}

Answer 1

http://jsfiddle.net/MfNdF/ is this something you are going for?

.blueTable input gives your checkboxes width of 400 pixels which might cause the problem.