67

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?

Amanda Myer
  • 671
  • 1
  • 5
  • 3
  • Make sure the character encoding is set properly in the headers of all outputted HTML files, as well as declared properly. Make sure you saved the files with the right encoding format. – Breakthrough Dec 08 '09 at 14:42
  • 2
    First thing I would check is browser cache if your CSS has been undergoing many revisions recently. You could also use something like Firefox's Firebug to check what CSS is being applied to each DOM element. A web location that demonstrates what your webserver is showing you, or if possible some CSS code might help look deeper. – mrvisser Dec 08 '09 at 14:44

14 Answers14

81

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/

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 13
    I don't understand why this exists but thankfully I found it before suicide. – Daniel Harvey Dec 13 '11 at 18:17
  • 22
    "Microsoft introduced different rendering modes for local and Internet servers so that web developers would break down in tears" - I was crying and laughing at the same time as I read that. So true, but so sad! – Sideshow Bob Feb 15 '12 at 13:05
  • THANK YOU!!! THANK YOU!!! I've spend 5 hours wondering what I'm doing wrong. I can be calm now-it wasn't me, it was IE8 and Mi***t fault! Thanks again, this saved my day!!! – Misiu May 15 '12 at 13:48
  • thank you! just spent 3 hours myself tweaking with no outcome! – stats101 Jul 24 '12 at 14:31
  • 1
    Thanks. I, fortunately, did not have to spend 5 hours tearing out my hair. I googled the problem and this came up. Thank you. – JDB Nov 14 '12 at 22:44
  • this is a better website for reference, if you are looking for example add the following line in your head tag – sQuijeW Jun 20 '13 at 19:57
  • I think I am having the same issue. But the meta tags for both the server and local looks the same. The CSS rendering is only slightly different. only one of my DIV has a break in it on the server I cannot get the padding/break to go away on the server. On the local version it looks that way it should. but on the server there is an additional break at the bottom. Really annoying. – Arcadian Nov 04 '14 at 16:21
  • After seven hours of wondering why my jQuery was seemingly selectively deciding sections of code not to run, I stumble upon this and everything instantly resolves itself. I don't know what I would have done if I didn't notice that one border that looked out of place... – notnot Apr 11 '15 at 02:42
19

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.

Pablo Claus
  • 5,886
  • 3
  • 29
  • 38
15

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.

rostam
  • 659
  • 1
  • 6
  • 10
10

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • I am looking at the HTML source right now using a DIFF tool and they are definitely NOT the same. However, the DOC type is the same. Are there any other differences that would be a red flag? – Amanda Myer Dec 08 '09 at 14:48
  • 1
    Incorrect whitespace before the doctype declaration would trigger MSIE in quirks mode as well. That can be any character which is not `\s`, `\t`, `\r` or `\n`, such as `\u00a0`. – BalusC Dec 08 '09 at 14:54
  • Good day. I have been having the similar issue, please refer to my threads: [one](http://stackoverflow.com/questions/39711761/why-rdlc-report-renders-differently-in-different-environments/39729635#39729635), [and two](http://stackoverflow.com/questions/39732671/what-causes-an-override-of-http-equiv-x-ua-compatible-content-ie-edge-chrome). I have compared source files for both, they are identical in terms of meta tags, xml declaration, whitespace. How would I proceed next? – Vadzim Savenok Sep 27 '16 at 22:52
  • BalusC I can't believe that incorrect whitespace was the issue. I'm unfortunately trying to get a responsive layout to work with IE11 on test server and local, They were behaving differently with identical html!! This one detail is what changed everything for the better! YES. BTW I'm using Master Pages with .net 4.5.2 – Doreen Nov 06 '18 at 23:53
9

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

Migs
  • 264
  • 3
  • 11
7

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.

Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • Thankyou! The problem happened to me in last 3 days and didn't know what to do. I know, this is old question, but can you explain please what makes it different refreshing browser with F5 or Ctrl F5? – Hotdin Gurning Jun 18 '16 at 02:53
  • @RubahMalam As far as I know firefox specifically will do a refresh without using cached content with Ctrl+F5. To do this in chrome you need to have the developer tools open (Ctrl+Shift+i) and then either right click or hold down left click on the refresh button. Doing this will give you a menu with refresh options. – Ryan Buddicom Aug 24 '16 at 14:24
  • This ctrl + F5 trick works in all browsers for windows. For mac I believe the equivalent is cmd + E. Not positive with out googling it. To permanently not cache see ...[link](https://stackoverflow.com/questions/1341089/using-meta-tags-to-turn-off-caching-in-all-browsers) – Mike Feb 14 '18 at 11:16
6

For me, Internet Explorer's Compatibility View Settings was the issue:

accessing Compatibility View Settings

Compatibility View Settings

After the check-boxes were un-set, the CSS renders perfectly

Zameer Ansari
  • 28,977
  • 24
  • 140
  • 219
5

We had the same issue, fixed on IE9 & IE11 with this:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
MJP
  • 59
  • 1
  • 1
4

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>
Portekoi
  • 1,087
  • 2
  • 22
  • 44
1

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.

Doreen
  • 714
  • 2
  • 14
  • 36
0

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.

Gary in Ohio
  • 11
  • 1
0

This often happens to me when the 'server' version is cached somehow. Refreshing did the trick. Throwing away 'temporary internet files' does it, too.

xtofl
  • 40,723
  • 12
  • 105
  • 192
-1

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.

Denis Zhbankov
  • 1,018
  • 1
  • 10
  • 10
  • 1
    I had this exact same problem, dunno why many copies of same solution are upvoted and this one which is one of the different few had -2.... – Emi-C Jan 17 '18 at 15:49
-2

try this,. 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Devendra Patel
  • 309
  • 2
  • 10