Website not rendering correctly

Question

User1027206698 posted

When I view our (internal) website/page through Visual Studio (on a Server) using the 'View in Browser' feature the site is not rendering correctly.  See link below.

Not Rendered Properly

The link below is what it (should) look like when vieing normally (also on the Server), i.e. using the actual site url

Rendered Properly - as it appears on client PCs.

I get the same results in both Internet Explorer and Google Chrome.

Any help/advice would be appreciated.

Thanks.

Answer 1

User409696431 posted

It looks like your local CSS is not the same as the published CSS.  You'll need to examine the elements using browser tools and find out what styles are applied - or not.

Answer 2

User283571144 posted

Hi conners,

According to your description, I suggest you could try to use F12 develop tool to see what happened when you view it in the server. It seems that your CSS file couldn't load well. If the css file return 404 not found, I suggest you could check the css path to make sure the path could be accessed.

Use F12 develop tool to check the css status:

Best Regards,

Brando

Answer 3

User-258456925 posted

Without seeing code or hosted reference site, it's difficult to answer. However, following are the basic issues:

1. Broken CSS link (check css reference link path)

2. Caching issue (try after clearing cache)

3. If you've any scripting error, it might prevent from being full render.

Let me know if you need further help!

Answer 4

User1027206698 posted

Brando ZWZ

Hi conners,

According to your description, I suggest you could try to use F12 develop tool to see what happened when you view it in the server. It seems that your CSS file couldn't load well. If the css file return 404 not found, I suggest you could check the css path to make sure the path could be accessed.

Use F12 develop tool to check the css status:

Best Regards,

Brando

Brando

Thanks for the tip.  Did the F12 thing you suggested and here are the results.

As you can see, I'm getting error 500 for css and js.

I did a search on that error and came accross this page but It didn't get me anywhere.  Do you have any other suggestions, please?

Thanks 

Answer 5

User1027206698 posted

Webblogsforyou2013

Without seeing code or hosted reference site, it's difficult to answer. However, following are the basic issues:

1. Broken CSS link (check css reference link path)

2. Caching issue (try after clearing cache)

3. If you've any scripting error, it might prevent from being full render.

Let me know if you need further help!

Webblog

1. CSS link paths are correct.
2. Cleared cache but still have the issue.
3. We were getting ASP.NET Ajax client-side framework failed to load but that was fixed with EnableCdn="true" in the master page, as below.

<asp:ScriptManager runat="server" EnableCdn="true"></asp:ScriptManager>

Any other ideas, please?

Thanks

Answer 6

User-258456925 posted

I see you're getting 500 - Internal Server Error. Have you tried enabling detailed error in Web.config to see actual error?

<configuration>
    <system.webServer>
        <httpErrors errorMode="Detailed" />
    </system.webServer>
    <system.web>
        <customErrors mode="Off" />
        <compilation debug="true" />
    </system.web>
</configuration>

It'll give some insights to see some actual errors.

Answer 7

User475983607 posted

It seems you are using Telerik controls?  I recommend reading the Telerik support documentation or posting this question on the Telerik support forums if the docs do not help.  

https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#using-the-telerik-controls-with-radscriptmanager-on-your-login-page-throws-an-error

https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting

Answer 8

User1027206698 posted

It seems you are using Telerik controls?  I recommend reading the Telerik support documentation or posting this question on the Telerik support forums if the docs do not help.  

https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#using-the-telerik-controls-with-radscriptmanager-on-your-login-page-throws-an-error

https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting

I don't know where you're getting that from.  We're not using anything to do with Telerik.

Answer 9

User1027206698 posted

Webblogsforyou2013

I see you're getting 500 - Internal Server Error. Have you tried enabling detailed error in Web.config to see actual error?

<configuration>
    <system.webServer>
        <httpErrors errorMode="Detailed" />
    </system.webServer>
    <system.web>
        <customErrors mode="Off" />
        <compilation debug="true" />
    </system.web>
</configuration>

It'll give some insights to see some actual errors.

I have tried that but it didn't tell me anything.

That was in the link the I posted in my reply above.

Where is the details supposed to be displayed? On the page or in the f12 screen?

Thanks

Answer 10

User475983607 posted

I don't know where you're getting that from.  We're not using anything to do with Telerik.

I simply Googled the error and there where many references to Telerik. 

A 500 error is generated on the server that runs the code. If you are still receiving a 500 error and only happens on certain machines like your dev box then there is probably a problem with the cod behind or a static file handler.

When I view our (internal) website/page through Visual Studio (on a Server) using the 'View in Browser' feature the site is not rendering correctly.  See link below.

"View in Browser" starts a local host like IIS Express and runs the code locally.   Is the web application located on your development machine?

Answer 11

User1027206698 posted

"View in Browser" starts a local host like IIS Express and runs the code locally.   Is the web application located on your development machine?

Yes, it is on the development server.

The weird thing is, we have another website on the same server and when we do "View in Browser" on it it displays correctly.  Both are using Bootstrap, but different versions.

Thats the only difference a can see.

Answer 12

User475983607 posted

Yes, it is on the development server.

Visual Studio is installed on the development machine?  Or is Visual Studio installed on your machine but you are opening the project located on the development server?

The weird thing is, we have another website on the same server and when we do "View in Browser" on it it displays correctly.  Both are using Bootstrap, but different versions.

Again, a 500 error means the code trying to run but throwing an exception.  Since static files like JS and CSS are causing the error, that indicates server side code that handles static file is having a problem.   For example bundling and minification or the AJAX Tool Kit.   Only you know how your application works.

Answer 13

User1027206698 posted

Visual Studio is installed on the development machine?  Or is Visual Studio installed on your machine but you are opening the project located on the development server?

Both Visual Studio and the project are on the development server.

We remote desktop onto the server to do our development.

Answer 14

User475983607 posted

We remote desktop onto the server to do our development.

What's hosting the the application IIS or IIS Express (Visual Studio)?   Is this a web site or web application project?  Does the application function as expected without using Visual Studio to view the application?

Can you access the CSS and JS file directly?