Geek Answers Handbook

The same HTML gives a different layout on different hosts

This code (which is a working snippet from the actual pages) works as expected in Safari and Firefox, as well as on one virtual host in IE7 and 8, but when it moves to another host, the “fixed” position is ignored on IE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test Page</title> <style type="text/css"> .alrtfrnt { background-color:gray;} .alrtfrnt { position:fixed;top:33%;left:33%;height:150px;width:300px;z-index:9;} </style> </head> <body> <div class='alrtfrnt'></div> </body> </html>

If "fixed" is changed to "absolute", then it works fine, but this is not a requirement.

This is probably not a caching problem, because it started with "real" pages and continued through some completely new pages. I also changed the color on the block to make sure it was picked up, and install IE to check for updates every time I visit the page.

I don’t understand why exactly the same code should be displayed in a different way depending on the server, so any hints regarding the following that I can check or change will be appreciated.

+4
source share
4 answers

Perhaps the server module is working with your output and confusing IE. For example, mod_pagespeed does this for optimization purposes, although I have not heard of a problem with IE. I would run diff in the source code that reads IE (and not the saved file itself).

If they turned out to be the same, I would suspect a problem with Quirks mode (other answers in more detail than I could).

+2
source

Let me name your two hosts A and B:

Host A - everything is working fine.

Host B - it is screwed, and position: fixed does not work.

The problem almost certainly is that IE displays Host B in Quirks mode .

You can verify this by pressing F12 and looking at document mode.

  • If he says "IE8 Standards," then everything works.
  • If he says “Quirks mode,” then things (like position: fixed ) won't work.

Here is a guide that defines exactly why Internet Explorer returns to Quirks mode:

If this seems too complicated, you can (in almost all cases) force the creation of the correct document mode by adding this meta tag:

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

If this helps, some other answers that I wrote about the same:

+4
source

It is possible that one host launches compatibility mode or quirk mode. I would clarify some points:

  • Make sure the markup is exactly the same - even a comment at the top of the page can change the rendering.
  • Both hosts are defined in the same way - for example, both are located in reliable local networks.
  • This is a stupid question - but does this happen on all machines? Compatibility mode can be started manually and saved by the browser (for the domain, iirc, so it can be launched for the internal page on this host, and not on another host).
  • On the Internet, a single host may be in the compatibility view list . You may be lucky.
  • IIS -
+2
source

Could you try to deliver! important next to a fixed position in front of the terminator?

 .alrtfrnt { position:fixed !important;top:33%;left:33%;height:150px;width:300px;z-index:9;}
0
source

More articles:


All Articles