Checkboxes moving around page.
I have checkboxes laid out in a table. When I navigate away from the page and come back the buttons move out of their table cell. All the buttons shift toward the top of the page. The buttons in the code that move are the checkboxes.
CheckboxRevDec
CheckboxTracking
CheckboxRevRa
CheckboxPEC
Code as follows
<div data-role="page" id="Main" data-theme="a" style="margin: 0px;">
<div data-role="content" style="margin: 0px;">
<div style="border: 2px solid rgb(0, 0, 0);margin: 0px;">
<table style="width:100%;padding: 0;border-collapse: collapse">
<tr>
<td>
LST/Limit:</td>
<td style="text-align: right" nowrap>
<div id="LSTToLimit">00:00:00:00 00:00:00</div></td>
</tr>
<tr>
<td>
RA/DEC:</td>
<td style="text-align: right" nowrap>
<div id="RADEC">00:00:00:00 +00:00:00:00</div></td>
</tr>
<tr id="DisplayRow" style="display: none;">
<td colspan="2"><div id="Display"></div></td>
</tr>
</table>
</div>
<div style="text-align:center;margin: 0px;" >
<table style="width:100%;padding: 0;border-collapse: collapse">
<tr>
<td style="vertical-align: top;text-align: left;">
<div id="State">STOP</div>
</td>
<td>
<img id="buttonnorth" alt="" src="buttonup.gif"
style="width: 75px; height: 75px" /></td>
<td style="vertical-align: top;text-align: right;">
<div id="Park">
</div>
</td>
</tr>
<tr>
<td>
<img alt="" src="buttonup.gif" style="width: 75px; height: 75px"
id="buttonwest" /></td>
<td style="text-align: center">
<img alt="" src="StopUp.png" style="width: 64px; height: 64px" id="buttonstop" />
</td>
<td>
<img alt="" src="buttonup.gif" style="width: 75px; height: 75px"
id="buttoneast" /></td>
</tr>
<tr>
<td style="text-align: left; color: FFFFFF">
<input id="CheckboxRevRa" type="checkbox" name="CheckboxRevRa" class="custom" data-theme="a" onclick="Tracking();" />
<label for="CheckboxRevRa">!Ra</label>
<input id="CheckboxTracking" type="checkbox" name="CheckboxTracking" class="custom" data-theme="a" onclick="Tracking();" />
<label for="CheckboxTracking" id="CheckboxTrackingLabel">Trk</label>
</td>
<td>
<img alt="" src="buttonup.gif" style="width: 75px; height: 75px"
id="buttonsouth" /></td>
<td style="text-align: right;">
<input id="CheckboxRevDec" type="checkbox" name="CheckboxRevDec" class="custom" data-theme="a" onclick="Tracking();" />
<label for="CheckboxRevDec">!Dec</label>
<input type="checkbox" name="CheckboxPec" id="CheckboxPec" class="custom" data-theme="a"/>
<label for="CheckboxPec">PEC</label>
</td>
</tr>
</table>
<table style="padding: 0;border-collapse: collapse">
<tr style="height:45px;vertical-align:bottom">
<td style="text-align:left;"><div id="CurrentSpeed" style="margin: 8px;">GUIDE</div>
</td>
<td style="text-align:left;">
<div id="movespeed" data-role="controlgroup" data-type="horizontal" style="border-style:none;margin-left:0px;margin-right:0px;height:15px">
<input type="button" data-role="button" onclick="MoveSpeedDown()" data-theme="a" data-icon="arrow-d" data-iconpos="notext" value="-"/>
<input type="button" data-role="button" onclick="MoveSpeedUp()" data-theme="a" data-icon="arrow-u" data-iconpos="notext" value="+"/>
</div>
</td>
</tr>
</table>
<fieldset class="ui-grid-b">
<div class="ui-block-a">
<input type="button" onclick="SetSpeed()" data-role="button" data-theme="a" value="Rate"/>
</div>
<div class="ui-block-b">
<a href="#Menu" data-role="button" data-theme="a">Menu</a>
</div>
<div class="ui-block-c">
<a href="#Goto" data-role="button" data-theme="a">Goto</a>
</div>
</fieldset>
</div>
</div><!-- /content -->
</div>