I'm not primarily an html programmer, but I'm using HTML to format the display of one of my screens in iPhone. So what I have is something that is supposed to be a paragraph like display with an embedded image in the top right, so that while next to the image, the text wraps and doesn't overlap, but will continue to the right once it is below the image.
I hen need a table of comments posted below that, so knowing that my view is 728 pixels wide, I did
<table width="768">
When I do this code in my smaller (240 px wide) view, the comments appear below the image, but in the larger view, it doesn't. Anyone know why this might happen?
Here's a sample of the html I'm using:
<body bgcolor="#FFFFFF">
<p>
<img src="http://www.smspal.com/iPhonePhoto.jpg" width="320" height="480" align="right">
Tweet
</p>
<table width="728" cellpadding="3" cellspacing="0" >
<tr>
<td>
<b>
<font size="2">Parent1 Parent1</font>
</b>
</td>
<td>
<p align="right"><font size="1">Tue. May 3, 2011 at 3:47 PM</font></p>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font size="2">Add a comment</font>
</p>
</td>
</tr>
</table>
<hr noshade size="1" />
</body>
Your giving an absolute pixel size on your table to match the pixel width of a specific screen. The size is absolute so on a smaller screen size nothing more can be displayed to the left or right of it so it has nowhere to go but down.
Try using a percentage width as that is a relative size that will conform to many different screen sizes.