CSS differs differently on a web server than on a development environment

Question

I have this problem when the web application that I created in my development environment displays differently after I uploaded it to the web server.

I use the same browser and the same computer to view pages. The only difference is the "server". I use .net 3.5 and in my development environment pages are served using ASP.net Development Server. On a web server, pages are submitted using IIS 6.0.

I have only one CSS file which is contained in the "App_Themes / Default" folder, which is used to manage all the CSS in my application.

Here are some of the things that do not appear the same:

1) I have a collapsible panel control, which, if assumed, should expand over all other elements of the page. In the dev environment, it behaves correctly. On a web server, the panel slides under other elements.

2) I have an element defined with a background and a certain font size. When displayed in my development environment, text is displayed on one line. However, on a web server, the text is wrapped even if the text is the same size. It is as if the informative div somehow turned out to be "smaller".

3) The width of buttons that do not have a fixed width (therefore, the width is determined by the button text) differs between the development environment and the web server. Buffers on the server are always wider.

I checked that there were no links to other CSS elements in the machine.config file and the global web.config on the server and in my development environment.

I know that the server reads from CSS, because in general it is similar (the same colors, background, font style, etc.). It is just that the dimensions seem to be off and layering divs.

Has anyone encountered this problem before? Any ideas on what I might be looking for?

Answer 1

It looks like you are comparing them in Internet Explorer 8. Microsoft has introduced various rendering modes for local and Internet servers so that web developers get frustrated in tears.

If there is no X-UA-Compatible value and no site in the Local intranet security zone, it will be displayed in EmulateIE7 mode by default.

Add an X-UA-Compatible or META header to enforce IE8 standard standards mode.

See also http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/

Answer 2

We also had a problem with compatibility modes, so I just added:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 

Since I knew that it works fine in IE7, 8 and 9.

Answer 3

At least it sounds like the production server added the HTML declaration in HTML or changed the doctype , which caused the page to be displayed in non-standard mode. This is also known as quirks mode, you see it very well in MSIE. The symptoms that you described can be recognized as a box model error in MSIE .

Right-click the pages and check the HTML source. Are they both exactly the same? (including meta tags, xml declaration, spaces, etc.)

If you are running FTP from Windows to Linux, make sure that you port in binary mode to ensure that spaces (spaces, lines) remain unchanged. Also make sure that you save documents as UTF-8 (or at least ISO-8859-1 ) and NOT as MS-proprietary encoding such as CP1252 .

Answer 4

For those of you who have this problem on the Intranet website, the meta tag will not fix the problem if the "Show intranet sites in compatibility view" checkbox (which in many cases)

You should send an HTTP response header at the server level, see here

Answer 5

I had the same issue on Google Chrome. Apparently, media queries are messed up if the page has been enlarged or reduced. Make sure the zoom level is 100% for both sites.

Answer 6

For me, Internet Explorer Compatibility View Settings was a problem:

After the checkboxes have not been set , CSS displays fine

Answer 7

Just add this to your web.config file:

 <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=8" /> </customHeaders> </httpProtocol> </system.webServer> 

Answer 8

We had the same problem fixed on IE9 and IE11:

 <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> </head> 

Answer 9

CSS coming from the server may be an older cached version - try refreshing the page with Ctrl + F5 to get a request.

Answer 10

I had the same problem. Our network uses Win7 with IE11 everywhere. For me, the solution was to add “localhost” to the list in the compatibility settings of IE> “Web Sites Added to Compatibility View” on my local machine. IE> Tools> Compatibility View Settings .

By the way, our NA has all IE11 machine settings for "Display Intranet Sites in Compatibility View", which are automatically checked by Group Policy.

Answer 11

This often happens to me when the "server" version is cached in some way. The refreshing did the trick. It also drops “temporary internet files”.

Answer 12

I had this problem. I changed the stylesheet and HTML code. It looked great locally, but did not work on the server. I found that in Visual Studio, the Copy to Output Directory CSS file is set to Do Not Copy. Therefore, my CSS updates were not deployed. Sometimes a problem is just a user error.

Answer 13

try it.

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 

Answer 14

May be caused by minimization, for example. on dev machine do you have

 <span>AAA</span> <span>BBB</span> 

but on the remote server it becomes

 <span>AAA</span><span>BBB</span> 

and the gap between them is lost.