• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

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
0
obb-taurus
Asked:
obb-taurus
  • 8
  • 8
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
where do you set the string: "Please specify a vaild phone number...."?
0
 
LZ1Commented:
Can you post a live URL?
0
 
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>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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?
0
 
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.?
0
 
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

0
 
LZ1Commented:
Can you post your jquery function your using for the validation? We're probably going to need to wrap that text some how.
0
 
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

0
 
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

0
 
obb-taurusAuthor Commented:
Unfortunately that did not work, I tried some variations like using a p tag and that did not work either.
0
 
LZ1Commented:
Keep that div in there, and then set a width on it like 100%.
0
 
obb-taurusAuthor Commented:
Sorry, didn't work.  Gotta love IE 9... :(
0
 
LZ1Commented:
In that case, we're really going to need to see a sample URL.  You can do something in JsFiddle
0
 
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
0
 
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.
0
 
obb-taurusAuthor Commented:
Worked perfectly, thanks so much for your help.
0
 
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!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now