Once my tables are filled with information, the tables on the left expand to fill the entire screen, while the tables on the right become squished together

I have encountered a frustrating issue that I cannot seem to resolve. When I compile the page, the tables on the left side display correctly as intended. However, once I upload it to my company's intranet and load the data (which is the same), the tables on the left side expand beyond the screen resolution of my work laptop (1600x900) while the tables on the right side shrink to about a quarter of their size.

Any assistance with this problem would be greatly appreciated. Below, you will find the .aspx file for the page and the accompanying style sheet. Only the top two panels of tables are included here.

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>

                        <!-- More table rows omitted for brevity -->

                    </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%;">

                        <!-- More table rows omitted for brevity -->

                    </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;
}

<!-- CSS styles for TBox class omitted for brevity -->

Answer №1

To improve the readability and functionality of your page, consider tidying up a few elements before troubleshooting:

  • Consolidate all styling into your stylesheet to minimize clutter in HTML code.
  • Erase redundant tags like <div class="header">; instead, apply styles directly to <h2>.

While this may not directly address your current issue, it will undoubtedly streamline your code and make it more user-friendly for others. :)

Answer №2

Oh, how I love converting tables to DIVs...

Answer №3

After testing your code on multiple browsers including IE, Chrome, and Mozilla, everything appears to be functioning correctly from my end. My computer's screen resolution is set to 1280*800. I suggest creating a main div with a width of 100%, then dividing it into two tables with each table taking up 50% of the width. Try to minimize the use of width attributes to ensure optimal performance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating tasks using the factory method while incorporating a delay

Attempting to execute a specific method with a delay of 5 minutes: try { HttpContext ctx = HttpContext.Current; System.Threading.Tasks.Task.Factory.StartNew(() => { HttpContext.Current = ctx; System.Threading.Thread.Sleep(5 * 6 ...

The slider image on my Bootstrap website is not properly displaying on mobile devices

Check out my bootstrap website which features a slider: here Although the slider image is displaying correctly on desktops, it's not fitting properly on mobile devices. I've tried adjusting the CSS with the following code: @media only screen ...

The Jquery click menu is functional, but appears completely translucent in Safari and the majority of mobile browsers

I have implemented a link that, when clicked, should reveal a menu on the website. This feature is specifically optimized for smaller browser windows with a breakpoint set at 965px. However, I am encountering some varied behaviors across different browsers ...

What is the best way to transfer a date value from the codebehind to the markup page?

We have a code snippet in the codebehind that sets the text of a TextBox to the current date: txtDBirth.Text = DateTime.Now.ToString("Mon dd yyyy") Our goal is to display the date in the format of Month Day Year, such as Oct 07 2011. In the markup, we h ...

Can JavaScript be used to simultaneously activate two events?

Is there a way to simultaneously trigger two events by clicking the "Past Locations" link on the right side navigation? I want it to jump to the bottom of the page to the "Past Locations" section and also display a default image map (Indianapolis map) at t ...

SVG's height attribute not adjusting properly

I am currently working on implementing an SVG sprite sheet using the "symbol" method outlined here. My HTML code is quite straightforward. <svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> Below is a sample symbol extracted ...

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

Integrating WCF with ASP.NET Compatibility Mode for enhanced security and personalized authentication through custom membership providers

I could really use some assistance with the following: Currently, I am working on a large application that consists of a WinForms client and server. In our setup, the server is made up of WCF services, with one service dedicated to authenticating users. T ...

Using jQuery for transferring data from one page to another resulted in an undefined index error in PHP MySQL

This is my first project where I implemented Jquery for the first time. The project consists of two pages: 1. listofleaders.php and 2. leadersprofile.php On the first page, listofleaders.php, there is an input text box where users can enter a leader' ...

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

Is it possible to achieve 100% screen height by combining a fixed height div with a stretchy height div?

I have a design concept that I'm trying to bring to life. I'm struggling with figuring out how to add another "stretchy div" to the layout. I want this second div to expand to fill all remaining vertical space on the screen without causing it to ...

How are these objects instantiated in a different way?

Can you explain the difference between these two cases: class Data { PersonDataContext persons = new PersonDataContext(); public Data() {} } Versus class Data { PersonDataContext persons; public Data() { persons = new Person ...

I am encountering a JQuery syntax error while using Bootstrap 3 button-dropdown links

I'm trying to replicate the example found here in order to create a similar markup: <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ...

Element floating over the edge

Desired Outcome: The CSS selector .header__main .left-col should function identically to .header__bar .left-col. It should align perfectly with the edge. Issue: The element with class .left-col is not behaving correctly in the second row alongside the sea ...

Compel the browser to initiate a reflow by adjusting the CSS

I am currently in the process of building a responsive image slider without relying on jQuery, using CSS3 transitions. The setup is quite simple: there's a viewport with a UL inside, containing relatively positioned LIs that are left floated. Howeve ...

Issues with retrieving the subsequent anchor element using Jquery Slider

(Apologies for the lengthy post. I like to provide detailed explanations.) Just starting out with Jquery, trying my hand at creating a custom image slider from scratch. Got the slider working with fade effects using this code: Javascript: $(document).re ...

Is it possible to customize the CSS styles of a jQuery UI modal dialog box?

Having trouble with my CSS styles not applying to a dialog modal added to my website using jQuery UI, even when using '!important'. I suspect that the predefined jQuery or UI CSS styles from a CDN link are preventing me from overriding them. The ...

Spacing the numbers on the D3 Y Axis by intervals of 25

Below is the D3 js code I am working with: const svg = select(svgRef.current); const { width, height } = wrapperRef.current.getBoundingClientRect(); const stackGenerator = stack().keys(keys); const layers = stackGenerator(data); const extent = [0, 100]; ...

Is there a way to customize the color of the collapsible menu?

I am currently delving into Bootstrap to enhance my skills. I decided to utilize the example navbar provided in the documentation: <nav class="navbar navbar-expand-lg navbar-light bg-primary"> <div class="container-fluid"&g ...

Aligning Text and images perfectly in a DIV container, and beyond

I am trying to center or align text and images at the bottom of a couple of tags, but vertical-align doesn't seem to be cooperating. Another challenge I have is creating a horizontal menu with a start image (e.g. menutop.png), followed by a filler ( ...