Link to home
Start Free TrialLog in
Avatar of rckrch
rckrchFlag for United States of America

asked on

Development controls and server controls not rendered the same.

I have a web application I have been developing on my development environment (VS2010).  When I load the application (one asp.net page and code behind) onto the server the rendering is different.  For some controls it is much different.  Charts are use are much smaller than the should be.  Borders on drop down lists are not rendered the same either.

Both my development server (local PC) and sql server use IE11, IIS7.  SQL Server 2012R2.

Any help would be greatly appreciated.

Thanks,
Avatar of slightwv (䄆 Netminder)
slightwv (䄆 Netminder)

Check the internet zone between your local machine and server.  Also check the compatibility modes.

https://forums.asp.net/t/1672199.aspx?HTML+Rendering+differently+local+vs+server
Avatar of rckrch

ASKER

How do I check  the internet zone and what am I checking for?
Avatar of rckrch

ASKER

This is a web application is contained in an intranet network.
Avatar of rckrch

ASKER

The web site does not come up on the browser in compatibility mode.
ASKER CERTIFIED SOLUTION
Avatar of slightwv (䄆 Netminder)
slightwv (䄆 Netminder)

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
In addition to @slightwv's suggestions, it sounds like one or more of your stylesheets isn't properly referenced wherever the CSS references are set for this page.
Avatar of rckrch

ASKER

Thanks Kelvin and slightwv for your responses.
In case others have this same issue, what was the problem?
Avatar of rckrch

ASKER

This problem is still not resolved.  I can work around compatibility mode issue.  However, the issue with the screen resolution persists.  On my local host server (development) the charts render as intended, but when I use the product server application the screen resolution changes (same screen).  This appears to only impact the charts (images).
Please ensure that all your styelsheets and scripts on the target page:
  • Are referenced correctly; they should be either relative or valid UNCs.
  • Exist in the locations their references target and that they have permissions to be reached via the browser.
Use the developer tools object browser, normally F12 on most browsers, highlight one of the objects not being rendered correctly and check the CSS settings and compare between the two envrionments.
Avatar of rckrch

ASKER

The charts are not in the debugger in developer tools.  The containers for the charts are along with the CSS settings, but not the chart images themselves.  These are asp.net chart controls.
I'm not that familiar with the chart controls but they should be bound by the CSS of the container they are rendered in.  Any object on the page should be visible in the tools and allow you to see the CSS they are governed by.

Are you saying the container is correct but the chart inside them are somehow different?  If you put a border around the container, the chart is somehow smaller than the container?
Avatar of rckrch

ASKER

The chart is in a panel and the panel only has a defined style of 'width=100%'.  

I don't understand how the CSS has an impact on the screen resolution changing from one server to another when using the same monitor.  Can you explain?
I believe what we are trying to diagnose is one or more CSS settings not being applied on the server that is correctly being accessed locally.

Maybe you have a setting like height="125%" that runs local but not on the server.  Wouldn't that appear to change the resolution?  or am I misunderstanding what you mean by resolution?

Maybe it would be a good time for a couple of screen shots showing what you are seeing?
Avatar of rckrch

ASKER

All my charts are governed for size by the below code.   One variable for width and one variable for height for all charts.  The below code is intended to adjust the size of the chart depending on the resolution of the screen used by the user.  This is done in page load event.
Dim CurScreenWidth As Integer = Screen.PrimaryScreen.Bounds.Width
        Dim CurScreenHeight As Integer = Screen.PrimaryScreen.Bounds.Height
        Dim DesignWidth As Integer = 1680        
Dim DesignHeight As Integer = 1050 
        Dim WidthRatio As Single
        Dim HeightRatio As Single

        WidthRatio = CurScreenWidth / DesignWidth
        HeightRatio = CurScreenHeight / DesignHeight

        Dim ChartWidth As Single = DesignWidth * WidthRatio * 0.96         
Dim ChartHeight As Single = DesignHeight * HeightRatio * 0.85

Open in new window

Again:  Maybe it would be a good time for a couple of screen shots showing what you are seeing?

Even though you set an objects size, I'm pretty sure CSS can muck with them after they are rendered but my .Net skills are a little rusty.
Avatar of rckrch

ASKER

screen-shots.pdf

These are the screen shots.
So it is a width issue?

Using dev tools, add a border to the container the chart is in and see if the chart is smaller or the container is smaller.
Avatar of rckrch

ASKER

screen-shots-border.pdf

These are with the border.  Panel is staying the same size - chart is much smaller.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rckrch

ASKER

Well, this may help.  Thanks!