Hi All! First time in a long time I've been unsuccessful in troubleshooting an issue but after 4 hours of banging my head I realize I'm just not going to see (although I'll probably feel silly when I find out what it is).

I'm using the following CSS/XHTML
/* List Classes */
fieldset ol {padding: 1em 1em 0 1em; list-style: none;}
fieldset li {float: left; clear: right; padding-bottom: 1em;}

/* Form Classes */
form {font-size: 100%; font: 500 1.2em "helvetica", verdana, sans-serif; text-align: left;}
form.quote {margin: 0 auto; padding: 0 2em;}

/* Fieldset */
fieldset {position: relative; margin: 0 0 1.5em 0; border: 1px solid #bfbab0;}
fieldset.hidden {display: none;}
fieldset.submit {margin-left: 1em; border-style: none;}
legend {position: relative; margin-left: -7px; padding: 0; color: #081a34; font: 600 1.4em "helvetica", verdana, sans-serif;}

/* Input */
label {display: block; width: 20em; color: #081a34; font: 600 1em "helvetica", verdana, sans-serif;}
input,select,textarea {width: 20em; margin-right: 5em; padding: .25em 0; background: #fff; border: 1px solid #081a34;}
select {width: 20.2em; padding: .15em 0;}
textarea {width: 20.5em; height: 10em;}
input.submit {width: 5em; padding: .5em;}

XHMTL is laid out as follows:
<fieldset><input type="hidden" name="phpMyAdmin" value="4594f30712f4fabaff6997416810f3f2" />
<legend>About You</legend>
<ol>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
<li><label for="name">Your Name</label><input type="text" name="name" id="name" /></li>
</ol>
</fieldset>

In FF, this displays 2 input fields per row within the design. In IE, the input fields break through the design/containers into one long horizontal line. I'm assuming I'm missing the application of either a float somewhere on a container or possibly adding a height/width but for the life of me cannot see where it should be.

Thank you!

@ sixsixmedia

I stand to the Kari.patila answer, but with some alter in his reply.

1. In FF, you can see 2 input fields per row because of your screen size if you change your Display property settings of your system into 1028 * 1024 then the FF browser will display 3 input fields in a row.

2. You should add clear:left to the following properties in your given CSS.

fieldset li {float: left; clear: right; padding-bottom: 1em; clear:left} //Added clear:left

This will fix in both IE as well as FF browsers.

You are allowed to add a link to help solve a problem.

I am sure that if you post one to the page in question it will improve your chances of finding a solution.

fieldset li { float: left; clear: right; padding-bottom: 1em }