Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom.
Everything within the box looks fine on screen resolutions higher than 1024 X 768. However, the issue arises when the resolution is set to 1024 X 768 or lower, causing the text to overflow the box and trigger horizontal scrollbars. I aim to adjust the inline CSS styling in order to ensure that the text and buttons display consistently across all resolutions without triggering scrollbars.
The main problem appears to be the table width being set to 100%.
I would greatly appreciate any assistance in resolving this issue. Thank you!
Please see the attached screenshots for reference:
> Sample at 1024 x 768
Below is the markup for the tables:
<div align="center" style="padding: 8px 10px 4px;">
<table cellspacing="0" cellpadding="0" align="center" width="600px">
<tbody><tr>
<td align="center" valign="top">
<div class="container">
<TABLE cellSpacing="5" cellPadding="5" width="100%" class="gradientHeader">
<tr>
<th width="100%">
xxxxxx
</th>
</tr>
<tr>
<td width="100%">
some text
</td>
</tr>
<tr>
<td width="100%" style="PADDING-LEFT: 10px">
<table width="100%">
<tr>
<td width="100%">
<FIELDSET style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;padding:0;">
<asp:RadioButtonList id="rbl" runat="server" />
</FIELDSET>
</td>
</tr>
<tr>
<td align="left">
<AN IMAGE BUTTON>
</td>
<td align="right">
<AN IMAGE BUTTON>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="hidProductId" id="hidProductId">
</td>
</tr>
</table>
</div>
</td></tr></tbody></table>