I'm about to pull my hair out (not much left anyway).
When I do a reload on my page everything looks like I want it to.
When I rotate my iPhone to landscape all the text stays the same
size, except the stats and title classes.
They grow to a larger text size ( I don't mind because there is more
room ), but when I rotate back to profile the text stays big in the
stats and title classes and wraps in a very ugly way.
I would rather the text not change in size in any orientation.
Any ideas? I've tried everything over the last three days and I'm at
my wits end.
None of my other apps misbehave like this.
I know my css is probably at fault, and not very good but any advice
would be very welcome at this point.
Thanks,
ml
body {
margin: 0;
font-size: 14px;
font-family: Helvetica;
background: #000000;
color: #FFFFFF;
}
.container {
position: absolute;
width: 100%;
}
.center {
position: absolute;
top: 0px;
bottom: 40px;
background: #000000;
}
.links {
font-size: 13px;
background: #000000;
border-bottom: 1px solid #E0E0E0;
padding: 8px 8px 8px 8px;
}
.title {
font-size: 14px;
text-align: center;
padding: 2px 0px 2px 0px;
}
.colname {
font-size: 14px;
text-align: center;
padding: 2px 0px 2px 0px;
}
.stats {
font-size: 14px;
background: #000000;
/* border-bottom: 1px solid #E0E0E0; */
padding: 8px 8px 8px 8px;
white-space:nowrap;
}
.residence {
font-size: 14px;
text-align: left;
color: #eeee00;
white-space:nowrap;
}
.security {
font-size: 14px;
text-align: left;
color: #6688ff;
white-space:nowrap;
}
.bluetext {
font-size: 14px;
color: #6688ff;
white-space:nowrap;
}
.whitetext {
font-size: 14px;
color: #ffffff;
white-space:nowrap;
}
.alarm {
font-size: 14px;
text-align: left;
white-space:nowrap;
}
.calls {
font-size: 13px;
background: #000000;
/* border-bottom: 1px solid #E0E0E0; */
padding: 8px 0px 8px 0px;
}
.call {
font-size: 13px;
white-space:nowrap;
}
.zones {
font-size: 14px;
background: #000000;
/* border-bottom: 1px solid #E0E0E0; */
padding: 8px 0px 8px 0px;
}
.zone {
font-size: 14px;
white-space:nowrap;
}
.lights {
font-size: 14px;
background: #000000;
/* border-bottom: 1px solid #E0E0E0; */
padding: 8px 0px 8px 0px;
}
.settings {
font-size: 14px;
background: #000000;
/* border-bottom: 1px solid #E0E0E0; */
padding: 8px 0px 15px 0px;
}
.light {
font-size: 14px;
white-space:nowrap;
}
a:link, a:visited {
color: #aaaaaa;
text-decoration: none;
}
a:active {
color: yellow;
text-decoration: none;
}
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title>
Home Dashboard (jquery ajax)
</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" href="css/iphone.css" type="text/css"
media="screen">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
</head>
<body>
<div class="container">
<div class="center">
<div class="links">
<table border="0" width="100%"
cellspacing="2" cellpadding="0">
<tr>
<td align="center"><a
href="http://www.lacas.com/home/graphs/
hometemp.html" target="_blank">Temperature Graphs</a></td>
<td align="center"><a
href="http://www.lacas.com/home/graphs/
homepower.html" target="_blank">Power Graphs</a></td>
</tr>
</table>
</div>
<div class="stats">
<table border="0" width="100%"
cellspacing="0" cellpadding="0">
<tr>
<td
class="residence"><span id="residence"></span>: <span
class="whitetext" id="date"></span></td>
</tr>
<tr>
<td
class="bluetext">Security: <span id="alarmstate"
class="alarm"></span>
</font> <span
id="alarmtime" class="whitetext"></span> <span
id="alarmdate" class="whitetext"></span></td>
</tr>
<tr>
<td
class="bluetext">Inside Temp: <span id="insidetemp"
class="whitetext"></span> -
Outside Temp: <span
id="outsidetemp" class="whitetext"></
span></td>
</tr>
<tr>
<td
class="bluetext">Sunrise: <span id="sunrise"
class="whitetext"></span> -
Sunset: <span
id="sunset" class="whitetext"></span></td>
</tr>
</table>
</div>
<div class="calls">
<table border="0" width="100%"
cellspacing="0" cellpadding="0" >
<tr bgcolor="#555555">
<td class="title"
colspan="3">Calls</td>
</tr>
<tr bgcolor="#333333">
<td class="colname"
width="100">Number</td>
<td class="colname"
>Name</td>
<td class="colname"
width="90">When</td>
</tr>
</table>
<table border="0" width="100%"
cellspacing="5" cellpadding="3" >
<script type="text/javascript">
for ( i=0; i<maxCalls;
i++ ) {
document.write("<tr>\n");
document.write("<td><span class=\"call\" id=\"call"+i+"number
\"><\/span><\/td>\n");
document.write("<td><span class=\"call\" id=\"call"+i+"name
\"><\/span><\/td>\n");
document.write("<td align=\"right\"><span class=\"call\" id=
\"call"+i+"time\"><\/span><\/td>\n");
document.write("<\/tr>\n");
}
</script>
</table>
</div>
<div class="zones">
<table class="title" border="0"
width="100%" cellspacing="0"
cellpadding="0" >
<tr bgcolor="#555555">
<td class="title"
colspan="3">Activity</td>
</tr>
<tr bgcolor="#333333">
<td class="colname"
width="100" align="center">Location</td>
<td class="colname"
align="center"> </td>
<td class="colname"
width="90" align="center">When</td>
</tr>
</table>
<table border="0" width="100%"
cellspacing="5" cellpadding="1" >
<script type="text/javascript">
for ( i=0; i<maxZones;
i++ ) {
document.write("<tr>\n");
document.write("<td><span class=\"zone\" id=\"zone"+i+"name
\"><\/span><\/td>\n");
document.write("<td align=\"right\"><span class=\"zone\" id=
\"zone"+i+"time\"><\/span><\/td>\n");
document.write("<\/tr>\n");
}
</script>
</table>
</div>
<div class="lights">
<table class="title" border="0"
width="100%" cellspacing="0"
cellpadding="0">
<tr bgcolor="#555555">
<td class="title"
colspan="4">Lighting</td>
</tr>
<tr bgcolor="#333333">
<td class="colname"
width="125">Location</td>
<td class="colname"
colspan="2">State</td>
<td class="colname"
width="100" >When</td>
</tr>
</table>
<table border="0" width="100%"
cellspacing="8" cellpadding="3">
<script type="text/javascript">
for ( i=0; i<maxLights;
i++ ) {
document.write("<tr>\n");
document.write("<td><span class=\"light\" id=\"light"+i
+"location\"><\/span><\/td>\n");
document.write("<td align=\"center\"><img id=\"light"+i+"image
\" border=\"0\" src=\"assets/Lightbulb.png\" width=\"20\" height=\"20
\"><\/td>\n");
document.write("<td align=\"left\"><span class=\"light\" id=
\"light"+i+"state\"><\/span><\/td>\n");
document.write("<td align=\"right\"><span class=\"light\" id=
\"light"+i+"time\"><\/span><\/td>\n");
document.write("<\/tr>\n");
}
</script>
</table>
</div>
<div class="settings">
<table class="title" border="0"
width="100%" cellspacing="0"
cellpadding="0">
<tr bgcolor="#555555">
<td class="title"
align="center" colspan="4">Settings</td>
</tr>
<tr bgcolor="#333333">
<td class="colname"
colspan="4">Update Time: <span
id="updatetime"></span></td>
</tr>
</table>
<table border="0" width="100%"
cellspacing="3" cellpadding="3">
<tr>
<td width="33%"
align="center"><a id="slow"
href="javascript:void();">Slow</a></td>
<td width="33%"
align="center"><a id="medium"
href="javascript:void();">Medium</a></td>
<td width="33%"
align="center"><a id="fast"
href="javascript:void();">Fast</a></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
