Geek Answers Handbook

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

Hopefully a picture is worth a thousand lines of code because I don’t want to remove all ASP.Net, HTML, JavaScript and CSS code to provide an example (but I will put what I can on request if someone doesn’t say "Oh , I've seen it before! Try this ... ") [Actually, I posted the code and CSS - see the bottom of the question).

Here is the part of the form page displayed in Firefox: alt text

The blue rectangles are the temporary styles of the tag <label>, and the orange are the temporary styles of the border of the tags <div>(so that I can see where they expand and break). <label>have a style float: leftlike the one <divon the right. In addition, the flow controls <div>are also float:leftclean, so they line up at the top <div>(since there are higher controls below, such as multi-line text fields).

Radio notes are created using the ASP control, so they are wrapped in <span>- also float to the left, since it is a descendant <div>.

Here is the same part of the screen displayed in IE7: alt text

, , , - <input>! , <span> .

, . <span>, . , .

IE7 , CSS , voodoo (.. , - ). , , - : " ! ..."

-?

Followup 1:

XHTML 1.0 Transitional <DOCTYPE>, .

2:

( ). , ASP.Net, 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>

CSS ( , , ):

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;
}

Matthew pointed me to this page on IE / Win Inherited Margins on form elements , and that was the problem. Input boxes inherited the left margins of all the elements contained in them. The solution I chose was to wrap each element <input>in an unoccupied one <span>. I am trying to maintain the HTML structure as semantically as possible, so I solved this with the jQuery command in the function $(document).ready():
//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 stupid <span>in IE ...

StackOverflow to the rescue again!

+5
source share

More articles:


All Articles