Databases
StackOverflow2013
Postsdbo
POWhy does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?
    text
    copied!<p>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].</p> <p>Here is a portion of a form page being displayed in Firefox: <img src="https://farm4.static.flickr.com/3191/2963487384_2c996e0bb6_o.png" alt="alt text"></p> <p>The blue boxes are temporary stylings of a <code>&lt;label&gt;</code> tag and the orange lines are temporary border styles of the <code>&lt;div&gt;</code> tags (so I can see where they extend and break). The <code>&lt;label&gt;</code>'s are styled to <code>float: left</code> as are the <code>&lt;div</code>'s on the right. In addition, the descendant controls of the <code>&lt;div&gt;</code> are also <code>float:left</code> purely so they will line up on the top of the <code>&lt;div&gt;</code> (since there are some taller controls like multiline textboxes down below).</p> <p>The radio buttons are generated by an ASP control, so they are wrapped in a <code>&lt;span&gt;</code> - also floated left since it is a descendant of the <code>&lt;div&gt;</code>.</p> <p>Here is the same portion of the screen rendered in IE7: <img src="https://farm4.static.flickr.com/3272/2963487410_d76e422e78_o.jpg" alt="alt text"></p> <p>There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <code>&lt;input&gt;</code> controls! Note that the <code>&lt;span&gt;</code>'s around the radio buttons and checkboxes line up correctly.</p> <p>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 <code>&lt;span&gt;</code>, but that might work. It's an ugly hack, though.</p> <p>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..." </p> <p>Anyone?</p> <p><strong>Followup 1:</strong></p> <p>I'm using the XHTML 1.0 Transitional <code>&lt;DOCTYPE&gt;</code>, so I should be in standards mode.</p> <p><strong>Followup 2:</strong></p> <p>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.</p> <pre><code> &lt;fieldset id="RequestInformation"&gt; &lt;legend&gt;Request Information&lt;/legend&gt; &lt;ol&gt; &lt;li&gt; &lt;label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel" for="ctl00_ContentPlaceHolder1_txtRequestDate"&gt;Request Date:&lt;/label&gt; &lt;div class="FormGroup"&gt; &lt;input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker" type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/&gt; &lt;img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/&gt; &lt;span id="txtRequestDate_error"/&gt; &lt;/div&gt; &lt;/li&gt; --STUFF DELETED HERE-- &lt;li&gt; &lt;label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel" for="ctl00_ContentPlaceHolder1_chkAppealed"&gt; Request Appealed?&lt;/label&gt; &lt;div class="FormGroup"&gt; &lt;span class="stdCheckBox"&gt; &lt;input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/&gt; &lt;/span&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ol&gt; &lt;/fieldset&gt; </code></pre> <p>Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):</p> <pre><code>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 &gt; * { float:left; background-color: Yellow; } fieldset ol { list-style: none; } fieldset li { padding-bottom: 0.5em; } li &gt; label:first-child { display: block; float: left; width: 10em; clear: left; margin-bottom: 0.5em; } em { color: Red; font-weight: bold; } </code></pre> <p><strong><h1>Solution!</h1></strong> Matthew pointed me to this page on <a href="http://www.positioniseverything.net/explorer/inherited_margin.html" rel="nofollow noreferrer">IE/Win Inherited Margins on Form Elements</a> 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 <code>&lt;input&gt;</code> element in an unstyled <code>&lt;span&gt;</code>. 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 <code>$(document).ready()</code> function:</p> <pre><code>//IE Margin fix: // http://www.positioniseverything.net/explorer/inherited_margin.html jQuery.each(jQuery.browser, function(i) { if($.browser.msie){ $(":input").wrap("&lt;span&gt;&lt;/span&gt;"); } }); </code></pre> <p>Note that this will only add the stupid <code>&lt;span&gt;</code>'s on IE...</p> <p>StackOverflow to the rescue again!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload