When my tables get loaded with data, the left tables take up the entire screen and the right tables get smooshed
https://stackoverflow.com/questions/1635439
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
I've been having this rather frustrating problem, and having failed so many times, I'm hoping someone here can help me. What happens is these tables on the left side of the page appear fine and do what they're supposed to do when I compile. However, once I load it on my company's intranet and load data that way (same data btw), the tables on the left of the page explode across the the screen beyond the resolution of my work laptop (1600x900) while the tables on the right get shrunken to about 1/4th their size.
So, please help, this has been frustrating me for hours. Below you'll find the page's .aspx and the style sheet. I'll only post the top two panels of tables.
ShippingReference.aspx
<table style="width: 1000px;">
<tr style="height: 800px;">
<td style="width: 50%; height: 100%;" valign="top">
<asp:Panel runat="server" ID="pnlMainInfo" style="margin:20px; background-color:#ccccff" GroupingText="Main Information:">
<table style="width:100%; height:100%;">
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Terms:</h2> </div>
<asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Acceptable Carriers:</h2> </div>
<asp:TextBox ID="txtCarriers" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Routing/Order Submit Time Line:</h2> </div>
<asp:TextBox ID="txtTimeLine" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Appointment Information Required:</h2> </div>
<asp:TextBox ID="txtAppointmentInformation" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Carton Markings Required:</h2> </div>
<asp:TextBox ID="txtCartonMarkings" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Special Labels Required:</h2> </div>
<asp:TextBox ID="txtSpecialLabels" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Shipping Contacts:</h2> </div>
<asp:TextBox ID="txtShippingContacts" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Routing Website:</h2> </div>
<asp:TextBox ID="txtRoutingWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Customer Website Instructions/Trouble Shooting:</h2> </div>
<asp:TextBox ID="txtCustWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="pnlMainInfo_CollapsiblePanelExtender"
runat="server" Enabled="True" TargetControlID="pnlMainInfo">
</cc1:CollapsiblePanelExtender>
</td>
<td style="width: 50%; height: 100%;" valign="top">
<asp:Panel runat="server" ID="pnlEDI" style="text-align:center; margin:20px; background-color:#ccccff" GroupingText="EDI:">
<table style="width:100%; height:100%;">
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Contact for Missed Pickup by Carrier:</h2> </div>
<asp:TextBox ID="txtMissedPickupContact" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Plant EDI Documents Required:</h2> </div>
<asp:TextBox ID="txtPlantEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>DI EDI Documents Required:</h2> </div>
<asp:TextBox ID="txtDirectImportEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Import/Direct Import ISF Requirements:</h2> </div>
<asp:TextBox ID="txtISFRequirements" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Import/Direct Import Customer Broker/Notify Party:</h2> </div>
<asp:TextBox ID="txtCustomerBroker" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Other Shipping Documents Required:</h2> </div>
<asp:TextBox ID="txtOtherShippingDocuments" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
Style Sheet:
body { text-align:center; }
.lblErrorMessage { font-family: Tahoma; font-size: 9pt; color: red; }
.TBox {
color:#333333;
font-size:11px;
background: url('../../Images/box_bottom_right.gif') no-repeat bottom right;
margin: 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.TBox .header {
margin: 0;
padding: 0;
background: url('../../Images/box_top_right.png') no-repeat top right;
text-align: center;
}
.TBox .header h2 {
color:#ffffff;
background: url('../../Images/box_top_left.png') no-repeat top left;
font-size:14px;
padding-top: 7px;
height:20px;
margin: 0;
}
.TBox .text {
background: url('../../Images/box_bottom_left.gif') no-repeat bottom left;
padding:10px 10px 15px 10px;
margin:0;
height:auto;
text-align:justify;
color:#003399;
line-height:15px;
}
Solution
Try to first clean the page up a bit, then it should be easier to "debug":
- Place all the styling in your stylesheet, especially the repeated
width-attributes. - Remove the unnecessary/redundant tags, i.e. the styling defined with
<div class="header">should just be set on the<h2>tag
I realize this is not the answer you're looking for, but it should defininately help you figure out the problem. Or at least make your sample code easier to read - for everybody else. :)
OTHER TIPS
Ahhh.... Change tables to DIVs...
I checked your code in IE,Chrome,Mozilla. For me it seems to work properly. My system screen resolution is 1280*800. Better U create a main div.Make its width:100%. Then create two tables inside that div.Each of width:50%. Dont use too many width attrib's.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
