Can't control font sizes

I have a web (browser based) app that I am building for mobile phones. I use jquery ajax to insert results into the page that it gets back from making a get request to a server side page. Everything works great except font sizes. The only font size I specified is in the body tag, and all elements are supposed to inherit this size. They do, except for the dynamic results that jquery inserts. These seem to come back twice the size they should. There is no font-size specification in the html that the jquery is receiving back and loading in the page. So why is this happening?

regular static html page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="driver.aspx.cs" Inherits="driver" %>
<!DOCTYPE html>
<html>
<head runat ="server">
    <title></title>
    <meta name="mobile-web-app-capable" content="yes">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <link rel="stylesheet" href="stylesTest.css"/>
</head>
<body>
    <div id="mapContainer">
        <div id="backButton" class="blue borderRad" onclick="hideMap();">LIST</div>
        <div id="map_canvas"></div>
    </div>
    <form runat="server" style="margin:0;padding:0">
    <div style="margin:25px 0 10px 0; text-align:right">
        <asp:Label ID="FullName" runat="server" Text=""/>&nbsp;&nbsp;<asp:Label ID="CompanyName" runat="server" Text=""/>&nbsp;&nbsp;<asp:Button 
            ID="Signout" runat="server" Text="Sign Out" OnClick="Signout_Click" />
    </div>
    <section id="controlsTop">
        <div id="addButton" onclick="addOrderForm();">ADD</div>
        <div id="planButton">PLAN</div>
        <div id="map" onclick="showMap();">MAP</div>
        <div id="settingsButton" onclick="showSettings();">SET</div>
    </section>
    <div id="allData">
        <div id="newOrder">
            <div>PHONE</div>
            <div><input id="phone" type="text" /></div> 
            <div>ADDRESS</div>
            <div><input id="address" type="text" style="width:100%"  list="addresses" onkeyup="getGoogleAddressesNew();" onfocus="getAddressesNew();" />
                <datalist id="addresses"></datalist>
            </div>
            <div>AMOUNT</div>
            <div><input id="amount" type="text" /></div>
            <div><input id="addNew" type="button" value="Add" class="button" style="margin-top:5px" onclick="addItem(); hideNewOrder();" /><input id="addCancel" type="button" value="Cancel" class="button" style="margin-top:5px" onclick="hideNewOrder();" /></div>
        </div>
        <div id="settings">
            <div><b>Dispatch Number</b></div>
            <div style="margin-bottom:15px"><input id="dispatchNum" type="text" /></div>
            <div><b>Default Area Code</b></div>
            <div style="margin-bottom:15px"><input id="areaCode" type="text" /></div>
            <div><b>Planning Options</b></div>
            <div style="margin-bottom:15px"><input id="leastMiles" type="radio" style="margin:5px 5px" />Least Miles<input id="fastestRoute" type="radio" style="margin:5px 5px" />Fastest Time</div>
            <div><input id="vg" type="checkbox" />Voice Guidance</div>
            <div style="margin-bottom:15px"><input id="ds" type="checkbox" />Dispatch Speaker</div>
            <div><b>Alert Customer</b></div>
            <div><input id="wrs" type="checkbox" />When Route Started</div>
            <div><input id="next" type="checkbox" />When Next</div>
            <div style="margin-top:10px"><input id="saveStettings" type="button" value="Save" class="button" style="margin-top:5px" onclick="hideSettings();" /><input id="editCancel" type="button" value="Cancel" class="button" style="margin-top:5px" onclick="hideSettings();" /></div>
        </div>
        <div id="orders"></div>
    </div>
    <section id="controlsBottom">
        <div id="start" onclick="startRoute()">START</div>
        <div id="clearButton"onclick="done();">DONE</div>
        <div id="dispatch">DISPATCH</div>
    </section>
    </form>
    <script type="text/javascript" src="map1.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

Open in new window


This is the jquery that dynamically loads the get response into the document
$(document).ready(function () {
    $("#orders").load("data.aspx");
});

Open in new window


This is the C# code behind file for data.aspx in the load method above that outputs html to be loaded into the requesting page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Security;
using System.Runtime.InteropServices;
using System.Security.Principal;

public partial class data : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        /*string referencepage = HttpContext.Current.Request.UrlReferrer.AbsolutePath.ToString();
        if (referencepage == "/login.aspx")
        {
            Response.Redirect("/driver.aspx");
        }*/
        
        string userID = Session["userID"].ToString();
        string companyID = Session["companyID"].ToString();
        if ((userID != "" && userID != null) && (companyID != "" && companyID != null))   
        {
            string started = Request["started"];
            SqlConnection myConnection = new SqlConnection("server=localhost;" +
                                               "Trusted_Connection=yes;" +
                                               "database=mydb; " +
                                               "connection timeout=30");
            String bg = "blue";
            try
            {
                myConnection.Open();
                SqlDataReader myReader = null;
                SqlCommand temp = new SqlCommand("Select ID, PhoneNumber, Address, DollarAmt, Problem, Next FROM Temp Where Delivered IS NULL AND Deleted IS NULL AND CreatedBy = " + userID, myConnection);
                myReader = temp.ExecuteReader();
                /*if (started == "true")
                {
                    SqlCommand orders = new SqlCommand("Select ID, PhoneNumber, Address, DollarAmt, Problem FROM Orders Where Delivered IS NULL", myConnection);
                    myReader = orders.ExecuteReader();
                }*/
                while (myReader.Read())
                {
                    String ID = myReader["ID"].ToString();
                    String problem = myReader["Problem"].ToString();
                    if (problem != null && problem != "")
                    {
                        bg = "red";
                    }
                    else if (myReader["Next"] != DBNull.Value)
                    {
                        bg = "green";
                    }
                    else
                    {
                        bg = "blue";
                    }
                    Response.Write("<div id='section" + ID + "' class='sectionMargin'>");
                    Response.Write("<ul id='item" + ID + "' class='" + bg + "' onclick='showOptions(\"buttons" + ID + "\");'>");
                    Response.Write("<li>" + myReader["PhoneNumber"].ToString() + "</li>");
                    Response.Write("<li>" + myReader["Address"].ToString() + "</li>");
                    Response.Write("<li>" + myReader["DollarAmt"].ToString() + "</li>");
                    Response.Write("</ul>");
                    Response.Write("<section id='buttons" + ID + "' style='display:none'>");
                    if (myReader["Next"] != DBNull.Value)
                    {
                        Response.Write("<div id='delivered" + ID + "' class='buttons green' onclick='delivered(\"" + ID + "\");'>DELIVERED</div>");
                    }
                    else
                    {
                        Response.Write("<div id='next" + ID + "' class='buttons green' onclick='nextStop(\"" + ID + "\");'>NEXT</div>");
                    }
                    Response.Write("<div id='edit" + ID + "' class='buttons orange' onclick='showEditForm(\"editForm" + ID + "\");'>EDIT</div>");
                    Response.Write("<div id='problem" + ID + "' class='buttons red' onclick='problem(\"" + ID + "\");'>PROBLEM</div>");
                    Response.Write("<div id='delete" + ID + "' class='buttons red' onclick='deleteItem(\"" + ID + "\");'>DELETE</div>");
                    Response.Write("</section>");
                    Response.Write("<div id='editForm" + ID + "' class='orange noDisplay pad20 borderRad'>");
                    Response.Write("<div>PHONE</div>");
                    Response.Write("<div><input id='phone" + ID + "' type='text' value='" + myReader["PhoneNumber"].ToString() + "' /></div>");
                    Response.Write("<div>ADDRESS</div>");
                    Response.Write("<div><input id='address" + ID + "' style='width:100%' type='text' list='editaddresses" + ID + "' onkeyup='getGoogleAddresses(\"" + ID + "\");' onfocus='getAddresses(\"" + ID + "\");' value='" + myReader["Address"].ToString() + "' />");
                    Response.Write("<datalist id='addresses" + ID + "'></datalist>");
                    Response.Write("</div>");
                    Response.Write("<div>AMOUNT</div>");
                    Response.Write("<div><input id='amount" + ID + "' type='text' value='" + myReader["DollarAmt"].ToString() + "' /></div>");
                    Response.Write("<div><input id='addEdit" + ID + "' type='button' value='SAVE' class='button' style='margin-top:5px' onclick='editItem(\"" + ID + "\");hideEditForm(\"editForm" + ID + "\");' /><input id='editCancel" + ID + "' type='button' value='CANCEL' class='button' style='margin-top:5px' onclick='hideEditForm(\"editForm" + ID + "\");' /></div></div></div>");
                }
                myConnection.Close();
            }
            catch (Exception error)
            {
                Response.Write("<p>" + error + "</p>");
                myConnection.Close();
            }
        }    
    }
}

Open in new window


This is the style sheet
html {height:100%}

body {
    background-color:rgb(0,0,0);
    margin:0 auto;
    padding:10px;
    font-family: arial, helvetica,sans-serif;
    color: rgb(255,255,255);
    width:100%;
    overflow-y: scroll;
    border-radius: 8px;
    font-size:36px;
    text-transform: uppercase;
    height:100%;
    position:relative;
}



div {border-radius: 8px;}
ul {border-radius: 8px;}

datalist {
}

input {
    margin:0 10px 10px 0;
    border:0;
    border-radius: 4px;
}


section {
    display:-webkit-flex;
    display:flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#addresses option {
}

#backButton {
    margin:0 auto;
    position:absolute;
    top:20px;
    left:225px;
    width:50px;
    z-index:100;
    padding:3px;
    cursor:pointer;
    text-align:center;
    border:solid 1px #000;
}

#controlsBottom {
    margin-top:15px;
}

#controlsBottom div {
    width: 28%;
    text-align:center;
    border:0;
    padding:10px 0;
    font-weight:bold;
}

#controlsBottom div:hover {
    cursor:pointer;
}

#controlsTop div {
    width: 24%;
    text-align:center;
    border:0;
    padding:10px 0;    
    font-weight:bold;
}

#controlsTop div:hover {
    cursor:pointer;
}

#addButton {
    background-color:green;
}

#planButton {
    background-color:rgb(0,148,255);
}

#clearButton {
    background-color:rgb(255,255,255);
    color:rgb(0,0,0);
}
 
#settingsButton {
    background-color:rgb(255,106,0);
}

#map_canvas{
    width:100%;
    height:100%;
}

#mapContainer{
    position:absolute;
    width:100%;
    height:100%;
    left: -2000px;
}

#dispatcherMap {
    width:100%;
    height:100%;
    position:relative;
}

#fitButton{
    position: absolute;
    top: 20px;
    left: 50%;
    padding: 20px;
    z-index: 200;
}


#newOrder {
    background-color:green;
    padding:20px;
    margin-top:10px;
    display:none;
    height:100%;
}

#newOrder div {
}

#settings {
    background-color:rgb(255,106,0);
    padding:5px 10px;    
    margin-top:10px;
    display:none;
}

#start {
    background-color:green;
}

#map {
    background-color:rgb(255,219,183);
    color:rgb(0,0,0);
}

#dispatch {
    background-color:red;
}

#orders {
    margin:30px 0;
}

#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
}

#tables {

}

.blue {
    background-color:rgb(0,148,255);
}

.font1em {
    font-size:1em;
}
.borderRad {
  border-radius: 8px;  
}

.buttons {
    width:22%;
    text-align:center;
    border:0;
    padding:5px 0;
    font-weight:bold;
    background-color:#CCC;
    margin-bottom:25px;
    cursor:pointer;
}

.buttons:hover{cursor:pointer}

.collapsed {
    display:none;
}

.disabled {
    background-color:rgb(128, 128, 128);
}

.green {
    background-color:green;
}

.red {
    background-color:red;
}

.noDisplay {display:none}

.orange {
    background-color:rgb(255,106,0);
}

.pad20{padding:20px}

.phone {
}

.sectionMargin {
    margin-bottom:30px;
}

Open in new window

LVL 9
BobHavertyComhAsked:
Who is Participating?
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.

skijCommented:
Try adding this CSS:
#orders, #orders * {
 font-size:18px;
}

Open in new window

If the font size is still to big or too small, change 18px to something larger or smaller.
0
BobHavertyComhAuthor Commented:
Hi skij, thanks for the idea. Unfortunately, it still doesn't work. I have even tried using inline style sheet attributes for each line item it outputs, and it just ignores it. I also made all section elements to be flex boxes. Would that cause this weird behavior? The unordered lists are not supposed to be children of any section but rather a sibling.
0
BobHavertyComhAuthor Commented:
For further clarification, my body is set to 36px for font size. I also have no other font-size specs on the style sheet except for this
#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
    font-size:17px;
}
 And I no longer have any inline styles in the static or dynamic content. So this is the only font specs that I have. When I set #orders ul li to anything under 18px, it works correctly. When I go from 17 to 18, it doubles in size and looks like it's about 36px, which is the body font size and the only other place the font size is specified. If I try .4em, it works correctly. As soon as I go to .5em, it doubles in size. So there is something about being half of 36 whether that is specified in pixels or ems, that causes it to be 36.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

skijCommented:
What about this?
#orders ul li {
    padding:0 2%;
    margin:0 0 10px 0;
    list-style-type:none;
    cursor:pointer;
    font-size:10px !important;
}

Open in new window

0
BobHavertyComhAuthor Commented:
Same thing. If I make the value 17px, it works. If I make it 18px, it looks like it is displaying at 48px. I cannot find anywhere in my code where 48px is specified. This is the weirdest thing I have ever seen. How can a px value work correctly, and then, when you increase it by 1px, it doubles in size or more? Seems impossible to me, but apparently it's not.
0
Bernard S.CTOCommented:
Is there in jquery something that increases font-size (ie 150% for some text enhancement)?
Can you look at the generated code to check what happens exactly?
Does this happens in other bowsers?

Is there any hidden media-query?
0
BobHavertyComhAuthor Commented:
Problem was that Android chrome does what is called "font boosting" when it thinks it's appropriate, so it ignores your font specs if they aren't big enough. IPhones/Safari use a different method, but increase the font size as well. This seems to work to take care of it.

html * { -webkit-text-size-adjust: none;  -moz-text-size-adjust: none; max-height:10000px }

The max-height attribute is a work around for Android where you set it to a ridiculous value and it stops font boosting.
0

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
Bernard S.CTOCommented:
Wow!
B-) Thx for the answer!
0
BobHavertyComhAuthor Commented:
Nobody else had the right answer, I found it myself.
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.