Solved

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

Posted on 2012-04-10
17
310 Views
Last Modified: 2012-04-11
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
Comment
Question by:obb-taurus
  • 8
  • 8
17 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 37831246
where do you set the string: "Please specify a vaild phone number...."?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37832332
Can you post a live URL?
0
 

Author Comment

by:obb-taurus
ID: 37833088
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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

Author Comment

by:obb-taurus
ID: 37833100
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37833104
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
 

Author Comment

by:obb-taurus
ID: 37833577
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37833587
Can you post your jquery function your using for the validation? We're probably going to need to wrap that text some how.
0
 

Author Comment

by:obb-taurus
ID: 37833797
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37833873
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
 

Author Comment

by:obb-taurus
ID: 37833928
Unfortunately that did not work, I tried some variations like using a p tag and that did not work either.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37833961
Keep that div in there, and then set a width on it like 100%.
0
 

Author Comment

by:obb-taurus
ID: 37833996
Sorry, didn't work.  Gotta love IE 9... :(
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37834004
In that case, we're really going to need to see a sample URL.  You can do something in JsFiddle
0
 

Author Comment

by:obb-taurus
ID: 37834365
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 37834419
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
 

Author Closing Comment

by:obb-taurus
ID: 37834491
Worked perfectly, thanks so much for your help.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37834505
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question