Mysterious cross-server display issue

Question

I have a problem I haven't seen before. I am doing a realign on our company's website and am testing locally. However, when I upload to our test server I notice display discrepancies within the same browser (IE8)!

Here is a screenshot of the two pages, both viewed in IE8 but residing on different servers. In the page on the right, you can see there is a weird chunk of white space to the side underneath the .swf file.

Can anyone give any insight as to why the same page on distinct servers would look different in the same browser? I have also noticed a couple of other cross-server bugs within Firefox.

Thanks!

Answer 1

One possibility that comes to mind is IE8's compatibility mode. There is the X-UA-Compatible header directive that forces IE8 into compatibility mode or out of it. Maybe one of the servers sends out that information.

Try adding a compatibility mode directive to the header and see whether it has any effect:

 <!-- Mimic Internet Explorer 7 -->
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

and alternatively:

 <meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->

Reference at MSDN: Defining Document Compatibility