Dennis, Good catch. Too bad I can't use the whole screen in landscape mode. ;->
Here is some more info that I found to work a tad better (including getting rid of the shift that covers the left side pixels). I set the container class width to 315px and set all the tables back to 100%. That seems to fix the problems and eliminate the left shift on rotate back to profile mode. Any one else know why this is happening? Cheers, ml On Sep 9, 2007, at 2:51 PM, Dennis Baldwin wrote: > That's an interesting problem. Your code looks completely fine, > but I did notice if you pull the widths out for your title tables > then everything appears to work (title fonts don't resize). I cut > and pasted your code and removed the table widths: > > http://iphone.ublip.com/changing_text_size_bug.html > > I also placed a span outside of any divs/tables and it appears to > have the same behavior as your original title classes: > > <span style="font-size: 14px">I'm outside of all divs and tables</ > span> > > After changing the widths of all the tables to 320 it now works > correctly (once again the span element listed above is not inside > any of these tables or divs!!) > > I realize this is not your intended design, but hopefully it points > out the problem areas. I'll dig around some more and see what I > can find out. > > Best regards, > Dennis > > Ublip Inc. - Location Matters > www.ublip.com > > On 9/9/07, Mr Junk <[EMAIL PROTECTED]> wrote: > > 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 -~----------~----~----~----~------~----~------~--~---
