Solved

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

Posted on 2012-04-10
17
307 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now