Odd alignment in form

Question

I inherited some css from the person who worked on this file previously.
So far, I've taken what used to be a very complicated looking form, and simplified it. I'm close to being done, but can't seem to make the phrase "Last Name" line up with the other labels.
NOTE: It does line up in Safari. But does NOT line up in Firefox.
I'm guessing it has something to do with either widths, margins or padding. I've played around with all of these but can't seem to find the right combo that makes it all line up in Firefox. Here is the test file:
http://www.jamison-design.com/test/abotests/ProfileTest.php
I appreciate your help in spotting the problem! I'm currently learning css, but have a long way to go... so it would help if you could respond in as simple terms as possible. :-)
THANKS!!! -- Wn10

Answer 1

The "clear" style clears any current floats.  Your problem was the existing float:right on the text box was affecting the subsequent label.  This layout is indeed an odd way to do things, honestly.  I'd do them like this -
<ol>
<li><span class="label">Label Stuff</span><span class="input">blah</span></li>
<li><span class="label">Label Stuff</span><span class="input">blah</span></li>
<li><span class="label">Label Stuff</span><span class="input">blah</span></li>
<li><span class="label">Label Stuff</span><span class="input">blah</span></li>
<li><span class="label">Label Stuff</span><span class="input">blah</span></li>
</ol>
Then you could have -
ol {
     list-style-type:none;
span.label {
     display:block;
     float:left;
     margin-right:10px;
     padding-right:5px;
     border-right:1px solid #CCC;
span.input {
     display:block;
     float:left;
li {
     overflow:hidden;
     width:400px;