ASP.NET website looks different when deployed - asp.net

I have googled around for the answer to this question, but haven't come up with anything. Maybe the search terms I used were too generic... Anyway, here goes:
I am discovering the joys of web design and ASP.NET, and the nightmare of trying to get things to display in the same way in IE and all the other browsers.
I am working in VS2010 and debugging my website using IE8. What I really don't get is why the website once I publish it looks different in IE from the way it looks in debug mode... I mean small things only, like border in gridviews disappearing in the published site, simple html horizontal rules aren't the same either.
It also messed up my list menu pretty bad, but I managed to fix that with the *display: inline; hack. The weird thing is that it doesn't need it in debug mode, but needs it for the published website.
I am hosting the site on my own machine, running Win XP Pro and hosting through IIS with .NET 4.0... Could the issue be IIS related?
Any help would be much appreciated, because those differences are just ridiculous and are driving me to desperation. I wish everyone over here would use Chrome or Safari, but unfortunately IE still rules in Japan...

This works for me, overrides the setting in ie
META Tag in HEAD element of your web page (or better in master page)
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
link here to info
http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx

I find it better to override compatibility in the HTTP Reponse Headers in IIS, adding header:
X-UA-Compatible: IE=Edge
The IE=Edge part will set compatibility to use the highest mode available, will apply to all users, and also apply to all pages in the site whilst only having to put the header in one place.

I've seen similar behavior related to trusted sites/intranet sites/internet sites security settings. When you run in debug mode is the URL you are using different from when you publish it? I've seen sometimes when I debug using a URL like http://localhost/xxx and when I access the same site straight from IIS using a URL like http://machinename.domain.com/xxx that one resolves to a trusted site or local intranet and the other to internet and it changes the appearance based on the IE settings.

For those using ASP.NET MVC, you can add kgp4death's
<meta http-equiv=“X-UA-Compatible” content=“IE=8” />
to the head element in your _Layout.cshtml.

I think you did not have given the correct path in the <script src="path">. Please check your path and also check the related file u must place this file in the project folder
I hope this suggestion solve your problem

Related

404 error - File or directory not found. This is happening with certain pages when using Chrome Web Browser

I've been hired into a company that uses ASP.NET for all of their external and internal sites. I'm not too familiar with ASP.NET.
I'm currently working on a external site that runs perfectly in Internet Explorer.
When using the site on chrome, I have certain pages that give me the 404 - File or directory not found.
What can I do to help prevent this error code from showing up when using this site the chrome?
From your description, I understand that your site is a legacy site that is compatible with the IE browser but it is not working properly with modern browsers.
The 404 error information generally informs us that something is not found but if the site works fine in the IE browser then it could be possible that the issue is something else. In that case, this is too little information to predict the cause of the issue.
You may need to provide detailed information about which exact piece of code has the issue. Which version of the Asp.Net project and which kind of project(Web application, web API, etc.) it is. You may need to modify your code or project to make it work with modern browsers including Google Chrome.
At present, if you don't want to make any changes in your code then you could try to use the IE mode in the MS Edge browser to load your legacy site.
You could configure the IE mode manually or using the group policy.
To quickly check it, Launch the Edge browser. Paste edge://settings/defaultBrowser in the address bar and press the Enter key. Add your page to the Internet Explorer mode pages. Visit your site, it should load properly in the IE mode in the Edge browser.

Unable to view SVG on live site in browser

I'm having problems getting SVGs to display correctly on my website, http://www.byfrequency.co.uk. Instead the site displays the fallback PNG's instead.
When I preview the site locally, they display fine in all browsers which leads me to believe there might be some kind of issue server side. Trouble is, I have no idea where to begin to rectify this!
(My web server is Windows 2008 and currently configured for PHP 5.2, ASP, SSI, Perl, ASP.NET 3.5, CGI)
Other things I've investigated is to inspect the object (logo.svg) within Chrome. All this gives me is a message saying "Failed to load response" and is highlighted in red. I've tried putting the files on the local root to see if that would make a difference which is doesn't. And finally, I've looked up numerous articles about displaying SVGs but to no avail.
On a semi-related note, my web fonts also seem to fail to load when the site is inspected but render correctly in Chrome/Safari but not Firefox. Again, the path to these files are correct but I can't seem to be able to rectify this error.
Any thoughts and ideas would be much appreciated!
Solved this now with the addition of MIME types within a web.config file.

Compatibility mode IE

I made a lot of research on this topic but none of the found solutions helped me.
So, let's start: I have a VB ASP.NET WEB Application.
The problem is the users can see the source code of the aspx files in the browser (IE) when the Display intranet sites in Compatibility View is unchecked.
I tried all of the methods, settings compatibility from IIS, web.config or even from the meta tags from <head>.
I discovered that also with the checkbox unchecked if I use Enterprise Mode the browser displays the page ok.
I tried then to find a solution to force the Enterprise Mode from code but I didn't find anything without changing registry keys. Changing registry keys can also be done to the above checkbox.
If I go in the DOM Explorere in IE and I try editing the source, anything I delete from there, the page is displayed ok.
How can I force the Enterprise Mode, or the Compatility View Mode from code? or is there another solution for me to solve this problem?
In my opinion you need to check the caching of the application if you say that if you modify something in DOM the page appears.

HTTPS does not work - Secure and Non secure data on web page?

I have a browser compatibilty problem with https? I have SSL installed and is in usage. Until today morning, my https part is working well. From then, Https is shown as https(with slashed in red color) saying the page has some insecure content.
I have not changed any code and suddenly i see this problem in chrome. In IE 8, i see the same problem but on every page, it shows me a popup if i should allow to opne secure and non secure or just secure. Firefox has no issues . It shows correct https without any problem. I am fed up with it searching all over. Why is this happenening for me in Chrome and IE 8.
Could someone tell me what the problem is and what can be done to solve it!
PS: I have also checked if the page source is any different when IE8 showed with and without secure data. Everything is the same. but viewstateID was different. Is that something that is creating this problem?
Thanks a lot in advance.
This is usually caused by having the absolute path to a resource specified somewhere on the page without having https specified, eg:
<img src="http://someurl.com/image.png">
If it's a link to something on your site, use https: or a relative path.
DO you have any 3:rd party javascript included, like google analytics or other that might have changed.
If you try with Firefox there is firebug you can add as an addon.
In there is a tab for network (net).
It lists everything the page loads.
In that list you should be able to find anything that gets loaded without https.
IE (correctly) complains when there is mixed http/https content as a security warning. Most other browsers do not typically complain when dealing with mixed content so your source is very likely the same in both instances.
I would second David Mårtensson's answer and say the issue is likely a third party library (google or MS hosted JQuery for example) or static asset server.

CSS renders differently on web server than on development environment

I have this problem where the web application that I have created in my development environment, displays differently after I upload it to the web server.
I am using the same browser and the same machine to view the pages. The only thing different, is the "server". I am using .net 3.5 and on my development environment the pages are served using the ASP.net Development Server. On the web server, the pages are served using IIS 6.0.
I have only a single CSS file that is contained within the "App_Themes/Default" folder that is used to control all the CSS in my application.
Here are some of the things that don't display the same:
1) I have a collapsible panel control that when expanded is supposed to show on top of all the other page elements. On the dev environment, it behaves correctly. On the web server, the panel slides underneath the other elements.
2) I have my element defined with a background and a certain font size. When displayed on my development environment, the text displays on one line. However, on the web server, the text is wrapped even though the text is the same size. It's as if the containing div is somehow rendered "smaller".
3) The width of buttons that do not have a fixed width (so the width is determined by the button text) is different between the development environment and the web server. The bottons on the server are always wider.
I checked to make sure there are no references to other CSS elements in the machine.config and global web.config on the server and on my development environment.
I know the server is reading from the CSS because in general, it looks similar (same colors, backgrounds, font style, etc). It's just that the sizes seems to be off and the layering of the divs.
Has anyone run in to this problem before? Any ideas of what I could look for?
Looks like you are comparing them in Internet Explorer 8. Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears.
If there’s no X-UA-Compatible value and site is in
Local Intranet security zone, it will be rendered
in EmulateIE7 mode by default.
Add X-UA-Compatible header or META to force full IE8 standards mode.
See also http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/
We were having an issue with compatibility modes too, so I ended up just adding:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Since I knew it worked fine in IE7, 8, and 9.
I had the same problem in Google Chrome. Apparently media queries get messed up if the page is zoomed in or out. Make sure your zoom level is 100% for both sites.
This at least sounds like that the production server added a xml declaration to the HTML or changed the doctype which caused the page being rendered in non-standards-compliant mode. This is also known as quirks mode, you see this very good back in MSIE. The symptoms which you described are recognizeable as box model bug in MSIE.
Rightclick the pages and check the HTML source. Are they both exactly the same? (including meta tags, xml declaration, whitespace, etc)
If you're FTP'ing from Windows to Linux, please ensure that you're transferring in binary mode to ensure that the whitespace (spaces, linebreaks) remain unchanged. Also ensure that you're saving documents as UTF-8 (or at least ISO-8859-1) and NOT as MS-proprietary encoding such as CP1252.
For those of you that are having this problem in an Intranet site setting the meta tag won't fix the problem if "Display intranet sites in Compatibility View" is checked on (which it is in a lot of cases)
You have to send the HTTP response header at the server level, see here
The CSS that is coming from the server may be a older cached version - try refreshing the page using Ctrl+F5 so it get re-requested.
For me, Internet Explorer's Compatibility View Settings was the issue:
After the check-boxes were un-set, the CSS renders perfectly
We had the same issue, fixed on IE9 & IE11 with this:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
Juste add this to your web.config file :
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=8" />
</customHeaders>
</httpProtocol>
</system.webServer>
I had the same issue. Our network uses Win7 with IE11 throughout. For me the solution was to, on my local machine adding "localhost" to the list in IE's compatibility settings > "Websites you've added to compatibility View". IE > Tools > Compatibilty View settings.
BTW our NA has every machine setting IE11 to "Display intranet sites in Compatibility View" automatically checked by a group policy.
This often happens to me when the 'server' version is cached somehow. Refreshing did the trick. Throwing away 'temporary internet files' does it, too.
I just had this problem. I'd changed my style sheet and HTML code. It looked great on locally but didn't work on the server. I found that in Visual Studio the CSS file's "Copy to Output Directory" was set to "Do not copy". So my CSS updates were not getting deployed. Sometimes the problem is just user error.
Can be caused by minification, e.g. on dev machine you have
<span>AAA</span>
<span>BBB</span>
but on remote server it becomes
<span>AAA</span><span>BBB</span>
and a space between them gets lost.
try this,.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

Resources