CSS renders differently on web server than on development environment.

Question

Hello.

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?

Answer 1

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.

Answer 2

I am not sure If you tried using FireBug or IE Toolbar to check If indeed the rendered styles are different, try them to verify.

One more thing is do check your javascript (if its not broken), If you are trying to manipulate any DOM or styles using it.

Thanks

Answer 3

As usual, without a link, it's all guess work. Typically it's due to different http headers being sent by the server, doctypes, and who knows what, but that's why we're all guessing right now.

Answer 4

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.

Answer 5

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

Answer 6

Well I decided to register with StackOverflow but it doesn't recognize me as the same person so I have to post here. Regarding all the comments about refreshing the CSS. I have completely rebuilt the web application and uploaded it to the web server multiple times, and have also restarted IIS multiple times. I just now did try to whole Ctl-F5 and "left mouse click + reload button" multiple times but it doesn't change the way it is displayed on either the web server or the development environment. When I compare the HTML source, the only differences are for dynamically generated viewstate info and any URLs which are automatically changed to the correct root path using the "~" in the declarative syntax. I am in the process now of using Firebug to compare actual CSS. I have screenshots showing the differences located at here. Notice that the font seems slightly different and the width of buttons is clearly different.

Answer 7

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/