Question

I have a simple address entry form. In IE9 and Firefox 10.0.2, the form displays perfectly fine.

In Chrome, the form displays fine upon initial load. But, when I give the one SELECT focus, the label and SELECT both shift to the right about 100px:

It gets even worse when I attempt to use Chrome’s Auto-fill:

So random. Now, I could iterate through the entire HTML layout, CSS rules, and JavaScript/jQuery being used, but, what I’m looking for are some ideas about what might be causing this. Below is the HTML and CSS that are being used for the elements in question.

HTML:

<form id="editAddressForm" name="editAddressForm" action="" method="post">
    <fieldset>
        <label>Name/Attention *:</label>
        <cfoutput>
        <input name="shipToName" value="#FORM.shipToName#" maxlength="40" />
        </cfoutput>
        <br />
        <label>Company:</label>
        <cfoutput>
        <input
            name="shipToCompany"
            value"#FORM.shipToCompany#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 1 *:</label>
        <cfoutput>
        <input
            name="shipToAddressLine1"
            value="#FORM.shipToAddressLine1#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 2:</label>
        <cfoutput>
        <input
            name="shipToAddressLine2"
            value="#FORM.shipToAddressLine2#"
            maxlength="40" />
        </cfoutput>&nbsp;
        <br />
        <label>Address 3:</label>
        <cfoutput>
        <input
            name="shipToAddressLine3"
            value="#FORM.shipToAddressLine3#"
            maxlength="40" />
        </cfoutput>
        <br />
        <label>City *:</label>
        <cfoutput>
        <input name="shipToCity" value="#FORM.shipToCity#" maxlength="30" />
        </cfoutput>
        <br />
        <label>State *:</label>
        <oftags:selectState name="shipToState" selectedValue="#FORM.shipToState#">
        <br />
        <label>Zip *:</label>
        <cfoutput>
        <input
            name="shipToPostalCode"
            value="#FORM.shipToPostalCode#"
            maxlength="10" />
        </cfoutput>
        <br />
        <label>Phone:</label>
        <cfoutput>
        <input
            name="shipToPhone"
            value="#REQUEST.UDFLib.String.PhoneFormat(FORM.shipToPhone)#"
            maxlength="16"/>
        </cfoutput>
        <br />
        <label>E-Mail:</label>
        <cfoutput>
        <input
            name="shipToEmailAddress"
            value="#FORM.shipToEmailAddress#"
            maxlength="60"/>
        </cfoutput>
        <br />
    </fieldset>
    <label>&nbsp;</label>
    <input type="submit" value="Submit" />
    <br />
</form>

CSS:

#editAddressForm {
    text-align: left;
    width: 720px;
}

#editAddressForm label {
    float: left;
    width: 140px;
    font-weight: bold;
    margin: 6px 0;
}

#editAddressForm fieldset {
    border: none;
}

#editAddressForm fieldset input,
#editAddressForm fieldset select {
    width: 200px;
}

#editAddressForm br {
    clear: left;
}

#editAddressForm select  {
    margin: 3px 0;
}

jQuery/JavaScript:

<script type="text/javascript">
    $(function(){
        /*
         * Page Initialization
         */
        $("input[name='shipToName']").focus();
    })
</script>

<script type="text/javascript">
    $(function(){
        $("#stateSelect").selectSelectedValue();
    });
</script>

jquery-select.js:

(function($){
    $.fn.extend({
        selectSelectedValue: function(callback) {
            var _selectedValue = $(this).prop("selectedValue");

            $(this).find("option").each(function(){
                if ($(this).text() == _selectedValue)
                    $(this).prop("selected", true);
            });

            $(this).change();

            if($.isFunction(callback))
                callback.call(this);
        },

        selectDefaultOption: function(callback) {
            $(this).find("option:first").prop("selected", true);

            $(this).change();

            if($.isFunction(callback))
                callback.call(this);
        },

        disable: function(){
            $(this).prop("disabled", true);
        },

        enable: function(){
            $(this).prop("disabled", false);
        }
    });
})(jQuery);

Answer 1

Try setting a line-height in CSS on your #editAddressForm label, or better yet, the parent containers for the labels and inputs. Also try display: block on the parent elements and set a height and/or overflow: hidden.