Why does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?

Question

Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].

Here is a portion of a form page being displayed in Firefox:

The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).

The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.

Here is the same portion of the screen rendered in IE7:

There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.

Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.

I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."

Anyone?

Followup 1:

I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.

Followup 2:

Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.

 <fieldset id="RequestInformation">
   <legend>Request Information</legend>
   <ol>
     <li>
       <label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
       <div class="FormGroup">
         <input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" 
           type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
         <img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
         <span id="txtRequestDate_error"/>
       </div>
     </li>
     --STUFF DELETED HERE--
     <li>
       <label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" 
         for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
       <div class="FormGroup">
         <span class="stdCheckBox">
           <input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
         </span>
       </div>
     </li>
   </ol>
 </fieldset>

Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):

div
{
    border-style: solid;
    border-width: thin;
    border-color:Orange;
}

label
{
    border-style: solid;
    border-width: thin;
    border-color:Blue;
}

.FormGroup
{
    float:left;
    margin-left: 1em;
    clear: right;
    width: 75em;
}

.FormGroup > *
{
    float:left;
    background-color: Yellow;
}

fieldset ol
{
    list-style: none;
} 

fieldset li
{
    padding-bottom: 0.5em;
} 

li > label:first-child
{
    display: block;
    float: left;
    width: 10em;
    clear: left;
    margin-bottom: 0.5em;
}

em
{
    color: Red;
    font-weight: bold;
}

Solution!

Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:

//IE Margin fix: 
//  http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
    if($.browser.msie){
        $(":input").wrap("<span></span>");
    }
});

Note that this will only add the stupid <span>'s on IE...

StackOverflow to the rescue again!

Answer 1

The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.

Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html