The same HTML gives different layouts on different hosts

advertisements

This code (which is a working snippet from actual pages) works as expected on Safari & Firefox and, on one virtual host on IE7 & 8 as well, but when it is moved 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 the 'fixed' is changed to 'absolute' then it is works fine, but that is not the requirement.

It is not likely to be a cacheing issue because this started out with 'real' pages and has continued through some entirely new pages. I have also changed the colour on the block to make sure that is being picked up and set IE to check for updates on every page visit.

I am at a loss as to why exactly the same code should display in a different fashion depending on the server, so any clues as to the next thing I can check or change would be appreciated.


It's possible that a server module is messing with your output and confusing IE. For example, mod_pagespeed does this for optimization purposes, although I haven't heard of a problem with IE. I would run diff on the source code that IE is reading (not the saved file themselves).

If they turn out to be identical, I would suspect an issue with Quirks Mode (which the other answers address more thoroughly than I could).