Text after right float splits into 2 lines in Internet Explorer only

I'm working on an ASP.NET application and I'm having a problem with how Internet Explorer 9 is displaying some text after a right float.  It currently wraps the text over 2 lines but when I look at it in Firefox or Google Chrome there is no problem ( please see attached images).  I am also including my CSS and HTML for the affected areas.

#contactWrapper
{
    width: 500px;
    padding-bottom: 15px;
   
}

#contactWrapper .row input
{
    float: right;
    width: 200px;
    clear: both;

}

#contactWrapper .row
{
    clear: both;
    margin-bottom: 5px;
    width: 305px;    
}

.notesWrapper
{
    width: 475px;
    margin-bottom: 15px;

}

.itemContainer
{
    border-bottom: 1px solid #898989;
    margin-bottom: 15px;

}

<div id="content">
            <div id="addressWrapper" class="centerDiv">
                <h2>
                    Customer Address:</h2>
                <AddressCtrl:AddressInput ID="addressInfo" runat="server" Visible='true' />
            </div>
            <div id="contactWrapper" class="centerDiv">
                <h2>
                    Contact Details:</h2>
                <div class="row">
                    <asp:Label ID="busLabel" runat="server" Text="Business:"></asp:Label>
                    <asp:TextBox ID="businessNumber" runat="server"></asp:TextBox>
                </div>
                <div class="row">
                    <asp:Label ID="faxLabel" runat="server" Text="Fax:"></asp:Label>
                    <asp:TextBox ID="faxNumber" runat="server"></asp:TextBox>
                </div>
                <div class="row">
                    <asp:Label ID="cellLabel" runat="server" Text="Cell Phone:"></asp:Label>
                    <asp:TextBox ID="cellNumber" runat="server"></asp:TextBox>
                </div>
                <div class="row">
                    <asp:Label ID="homeLabel" runat="server" Text="Home Phone:"></asp:Label>
                    <asp:TextBox ID="homeNumber" runat="server"></asp:TextBox>
                </div>
                <div class="row">
                    <asp:Label ID="emailLabel" runat="server" Text="E-Mail:"></asp:Label>
                    <asp:TextBox ID="emailAddress" runat="server"></asp:TextBox>
                </div>
                <div class="row">
                    <asp:Label ID="otherLabel" runat="server" Text="Other:"></asp:Label>
                    <asp:TextBox ID="otherContactType" runat="server"></asp:TextBox>
                </div>
            </div>

Open in new window


IE versionFirefox version
obb-taurusAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Meir RivkinFull stack Software EngineerCommented:
where do you set the string: "Please specify a vaild phone number...."?
LZ1Commented:
Can you post a live URL?
obb-taurusAuthor Commented:
sedgwick, the string is generated by jQuery validation but I can just type the text "Please specify valid phone number" right below the text box as shown in the attached code and it still does the same thing.

<div class="row">
                    <asp:Label ID="busLabel" runat="server" Text="Business:"></asp:Label>
                    <asp:TextBox ID="businessNumber" runat="server" ></asp:TextBox>
                    Please specify a valid phone number
                </div>
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

obb-taurusAuthor Commented:
LZ1,

Sorry, I don't have this on a web server that can be accessed externally, was there something you were thinking about that I could try?
LZ1Commented:
Generally the problem with IE is that there are not widths on elements.  Is the "Please specify a valid phone number" wrapped in anything? A div, p tag, etc.?
obb-taurusAuthor Commented:
LZ1,

If I understand what you are asking, it is wrapped in a div along with a label and text box.  If you are referring to the "Please specify a valid phone number" that I believe is not wrapped in anything although I'm not sure how jQuery renders it's error messages.  Since it does the same thing when I manually enter the text below the text box without tags etc, I'm assuming jQuery probably does the same.  The code below will do the exact same thing with the text as shown in the IE image that I provided along with my original post.

<div class="row">
                    <asp:Label ID="busLabel" runat="server" Text="Business:"></asp:Label>
                    <asp:TextBox ID="businessNumber" runat="server" ></asp:TextBox>
                    Please specify a valid phone number
                </div>

Open in new window

LZ1Commented:
Can you post your jquery function your using for the validation? We're probably going to need to wrap that text some how.
obb-taurusAuthor Commented:
Here is the validation function and there is a method I've added called PhoneVal which contains the phone error message.

var validator = $('#form1').validate({
                highlight: function (element, errorClass) {
                    $(element).addClass("invalidElem");

                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass("invalidElem");


                },
                errorElement: "div",
                errorClass: "errorMsg"
            });

            $.validator.addMethod("phoneVal", function (phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
		        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "Please specify a valid phone number");


            $.validator.addClassRules({
                nameValidation: {
                    required: "#<%= addressInfo.CompanyClientID %>:blank",
                }, //end nameValidation
                companyValidation: {
                    required: "#<%= addressInfo.FirstNameClientID %>:blank, #<%= addressInfo.LastNameClientID %>:blank"
                }, //end company validation
                emailContact: {
                    email: true
                }, //end Email contact
                phoneContact: {
                    phoneVal: true
                } //end phone contact
            });
           
            $(firstNameCtrl).add(lastNameCtrl).addClass("nameValidation").change(function (e) {
                $('#form1').validate().element($(e.target));
                $('#form1').valid();

            });
            $(companyNameCtrl).addClass("companyValidation").change(function (e) {
                $('#form1').validate().element($(e.target));
                $('#form1').valid();
            });

            $('#<%= businessNumber.ClientID %>').add('#<%= faxNumber.ClientID %>').add('#<%= cellNumber.ClientID %>').add
                ('#<%= homeNumber.ClientID %>').addClass("phoneContact").change(function (e) {
                    $('#form1').validate().element($(e.target));
                });

            $('#<%= emailAddress.ClientID %>').addClass("emailContact").change(function (e) {
                $('#form1').validate().element($(e.target));
            });

        });                 //end ready

Open in new window

LZ1Commented:
Try this:

var validator = $('#form1').validate({
                highlight: function (element, errorClass) {
                    $(element).addClass("invalidElem");

                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass("invalidElem");


                },
                errorElement: "div",
                errorClass: "errorMsg"
            });

            $.validator.addMethod("phoneVal", function (phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
		        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "<div>Please specify a valid phone number</div>");


            $.validator.addClassRules({
                nameValidation: {
                    required: "#<%= addressInfo.CompanyClientID %>:blank",
                }, //end nameValidation
                companyValidation: {
                    required: "#<%= addressInfo.FirstNameClientID %>:blank, #<%= addressInfo.LastNameClientID %>:blank"
                }, //end company validation
                emailContact: {
                    email: true
                }, //end Email contact
                phoneContact: {
                    phoneVal: true
                } //end phone contact
            });
           
            $(firstNameCtrl).add(lastNameCtrl).addClass("nameValidation").change(function (e) {
                $('#form1').validate().element($(e.target));
                $('#form1').valid();

            });
            $(companyNameCtrl).addClass("companyValidation").change(function (e) {
                $('#form1').validate().element($(e.target));
                $('#form1').valid();
            });

            $('#<%= businessNumber.ClientID %>').add('#<%= faxNumber.ClientID %>').add('#<%= cellNumber.ClientID %>').add
                ('#<%= homeNumber.ClientID %>').addClass("phoneContact").change(function (e) {
                    $('#form1').validate().element($(e.target));
                });

            $('#<%= emailAddress.ClientID %>').addClass("emailContact").change(function (e) {
                $('#form1').validate().element($(e.target));
            });

Open in new window

obb-taurusAuthor Commented:
Unfortunately that did not work, I tried some variations like using a p tag and that did not work either.
LZ1Commented:
Keep that div in there, and then set a width on it like 100%.
obb-taurusAuthor Commented:
Sorry, didn't work.  Gotta love IE 9... :(
LZ1Commented:
In that case, we're really going to need to see a sample URL.  You can do something in JsFiddle
obb-taurusAuthor Commented:
I've added it to jsFiddle but have no idea what I'm doing there although I did manage to get my web page to display but it seems like the validation script isn't triggering at all.  I did some searching to see about enabling the validation plug in and tried what I found but that didn't work.  

Here is the link, perhaps you can tell me what I'm missing..
http://jsfiddle.net/obb_taurus/m6w8j/13/

Thanks
LZ1Commented:
Ok, you were missing the jquery validate plugin.  No worries though, I think I got it.  

In your CSS add the .errorMsg{float:left;}.  That should help IE.

You can also take out that extra div with the 100% width.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
obb-taurusAuthor Commented:
Worked perfectly, thanks so much for your help.
LZ1Commented:
Glad we got it.  Sorry for all the back and forth though. I should have recognized it was a float issue since it wasn't a width issue. Gotta love IE!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.