CSS renders differently on web server than on development environment

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