Solved

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

Posted on 2012-04-10
17
312 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Save data in two Database, Asp 2 71
How does this modal work? 3 34
such an easy question, but i can't find the solutions 5 23
Javascript function 3 23
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

752 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